너굴 개발 일지

TIL_210503_웹 UI 관련 기본지식, HTML 태그2, CSS 기초 본문

HTML,CSS

TIL_210503_웹 UI 관련 기본지식, HTML 태그2, CSS 기초

너굴냥 2021. 5. 4. 00:05

목차


웹 표준
웹 표준의 장점
웹 호환성


인터넷
W3C(World Wide Web Consortium) 
웹 서비스(Web Service)


HTML
HTML5

 

HTML태그
- 영역 관련 태그 (inline, block 요소)


-  글자 입력 관련 태그
1) 입력 내용을 그대로 보여주는 태그 - <pre>

- 목록 태그
- 하이퍼링크 태그 - <a>
- 테이블 태그 - <table>
- 이미지 태그 - <img>
- 비디오 태그 - <video>
- 오디오 태그 - <audio>

HTML5 - 시맨틱 태그


CSS
CSS를 HTML 문서에 적용하는 방법
CSS 선택자
선택자 우선순위
css not 선택자

 

 

웹 표준

브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현

 

웹 표준의 장점

- 수정 및 운영관리 용이

- 접근성 향상

- 검색엔진 최적화(SEO)

- 호환성 가능 (다양한 브라우저에서도 작동)

 

웹 호환성

표준 웹 기술을 사용해 운영체제, 브라우저 등 어느 한쪽으로 최적화되거나 종속되지 않도록 공통 요소를 사용해 웹 페이지를 제작하는 기법 (= 운영체제나 브라우저 간 동일한 결과 출력)

 

인터넷

international network 의 약자로 온라인이 연결되어있는 곳에서 누구나 접속해서 온라인상의 정보/지식 등을 게시 및 공유하고 서로 교환할 수 있도록 해주는 통신망

 

W3C(World Wide Web Consortium) 

월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직

 

웹 서비스(Web Service)

네트워크 상에서 서로 다른 종류의 컴퓨터들 간에 상호작용을 하기 위한 소프트웨어 시스템

 

HTML

Hyper Text Languague의 약자로 웹 페이지 구조 표현

 

HTML5

단순히 웹 문서 작성시 사용되는 문법전 버전 뿐만 아니라 새로운 API 스펙 포함하는 개념 

 

HTML태그

영역관련 태그

<div> : 줄 바꿈이 적용되어 이미 존재하는 태그의 다음 줄에 영역 설정

             특별 기능 없이 컨텐츠 영역 설정시 사용

<span> : 줄 바꿈이 적용되지 않아 옆으로 영역이 붙음

                  주로 단어 사이에 띄어쓰기시 사용 (기존의 &nbsp;를 여러 번 사용할 경우)

 

 

inline, block 요소

인라인 요소 : 문자의 일부분만 선택하여 지정 (<span>, <b>, <a> 등)

블록 요소 : 넓은 범위를 묶어서 지정 (<div>, <p>, <ol>, <ul>,<dl> 등)

 

 

 

글자 입력 관련 태그

입력 내용을 그대로 보여주는 태그 - <pre>

줄 바꿈, 정렬 상태 등을 입력한 상태 그대로 보여주는 장점이 있으나 글자의 색상이나 모양을 변경할 수 없는 단점 존재

 

예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>pre 태그 테스트</title>
</head>
<body>
	<pre>
		줄 바꿈, 정렬 상태 등을 입력한 상태 그대로 보여주어 자유롭게 내용을 작성할 수 있는 장점이
		있지만 글자의 색상이나 모양을 변경할 수 없는 단점이 있다
	</pre>
	<p>
		<i>기울림</i>
		<b>굵게</b>
		아래<sub>첨자</sub>
		위<sup>첨자</sup>
		<u>밑줄</u>
		<ins>테스트</ins>
		<strong>강조</strong>
		<small>작게</small>
		<mark>마킹</mark> <!-- htmㅣ 5만 가능 -->
	</p>
</body>
</html>

 

목록태그

목록을 표현하는 태그로 <ol>, <ul>, <dl>이 있음

<ul> : 순서가 없는 목록에서 사용

<ol> : 순서 있는 목록에서 사용

<dl> : 떤 용어와 용어에 대한 설명을 하나의 목록으로 묶어서 리스트 표시할때 사용

 

 

하이퍼링크 태그 - <a>

클릭시 다른 페이지로 이동시키는 하이퍼링크를 적용시켜주는 태그

 

문법

<a href=”하이퍼링크 경로” [target="_(blank|self|parent|top)">하이퍼링크가 적용될 내용</a>

 

href:  링크될 주소

target : 새 창읠 띄울 위치 지정

tareget 속성값 설명
_blank 새로운 웹 브라우저 창에 열기
_self 현재 프레임에 열기(기본값)
_parent 현재 프레임을 호출한 상위 프레임에 열기(프레임 문서에 적용
_top 링크된 내용을 프레임을 모두 없애고 웹 브라우저 화면 전체에 열기(프레임 문서에 적용)

 

<a> 태그를 이용한 책갈피 설정

쇼핑몰 상세 페이지 부분에서 사용하며 현재 페이지의 컨텐트 내용이 길 경우, 상단으로 빨리 이동할 때 사용

<a href="#이동할요소의 ID">요소</a>

 

 

예시

<!DOCTYPE html> 
<html>
<head>
	<meta charset="UTF-8">
	<title>현 위치</title>
</head>

<body>
	<h1>Hello</h1>
	
	<div>
		<p>Welcome to HTML</p>
		<p>HTML 수업 시작</p>
		HTML은 사용자 UI <br />
		관련 내용을 출력
		<!-- (comment)주석 : 웹 브라우저가 출력시 무시하는 부분 -->
	</div>
	div와 span 태그 테스트
	<div>컨텐츠의 영역 설정시 주로 사용</div>
	span 태그는 <span></span> 주로 단어 사이의 띄어쓰기 할 때 사용
	
	<ul type="square">
		<li>첫번쨰</li>
		<li>두번째</li>
		<li>세번쨰</li>
	</ul>
	
	<ol type="i">
		<li>첫번쨰</li>
		<li>두번째</li>
		<li>세번쨰</li>
	</ol>
	
</body>
</html>

 

 

<dl>태그 예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>용어와 설명을 리스트 형태로</title>
</head>

<body>
	<dl>
		<dt>용어1:HTML5</dt>
		<dd>설명1:HTML5는 HTML의 완전한 다섯번째 버전 W3C의 스펙으로 표준화된 언어</dd>
	
		<dt>용어2:CSS3</dt>
		<dd>설명2:CSS3은 기존 스타일 시트보다 화려하고 역동적인 기능을 추가 <br />
			특히, 포토샵등의 프로그램없이 투명한 버튼, 그림자 처리등<br/> 다양한 꾸미기 요소가 추가
		</dd>
	</dl>
	<a href="http://www.naver.com">네이버로 이동</a>
	<a href="http://www.google.com" target="_blank">구글로 이동</a>
	<a href="http://www.daum.net" target="_self">다음으로 이동</a>
</body>
</html>

테이블 태그 - <table>

<thread>, <tbody>, <tfoot> 태그는 테이블의 영역을 나타내며 테이블 태그 내에 한 개만 존재할 수 있음

 

예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>table 태그 연습</title>
</head>
<body>
	<table>
		<caption>테이블 연습</caption>
		
		<thead>
			<tr><th>이름</th><th>주소</th><th>연락처</th></tr>
		</thead>
		
		<tbody>
			<tr><td>홍길동</td><td>서울 영등포구 당산</td><td>010-1234-4567</td></tr>
			<tr><td>너너굴</td><td>서울 영등포구 당산</td><td>010-1234-4567</td></tr>
			<tr><td>나나냥</td><td>서울 영등포구 당산</td><td>010-1234-4567</td></tr>
		</tbody>
		
		<tfoot>
			<tr><td colspan="3">사용자목록 : 개인정보보호</td></tr>
		</tfoot>
	</table>
</body>
</html>

 

 

 

이미지 태그 - <img>

이미지를 넣고자 할 때 사용하는 태그

 

문법

<img src="" width="" height="" border="" vspace="" hspace="" align="" alt="" title="">

src             : 보여줄 이미지의 주소. 필수 속성

width       :  이미지의 너비. 픽셀(px) 또는 %로 값 부여

height      : 이미지의 높이. 픽셀(px) 또는 %로 값 부여

border     : 이미지 테두리의 굵기 (HTML5에서 지원하지 않는다)

vspace     : 이미지와 텍스트 사이의 위아래 여백 (HTML5에서 지원하지 않는다)

hspace     : 이미지와 텍스트 사이의 좌우 여백 (HTML5에서 지원하지 않는다)

align          : 텍스트와의 상관관계 위치. top, middle, bottom, left, right가능(HTML5에서 지원하지 않는다)

alt               : 이미지가 없거나 로딩되지 않을 때 대체되는 텍스트

title            : 마우스를 이미지에 올려 놓았을 때 풍선 도움말로 보이는 텍스트

 

예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>img 태그 테스트</title>
</head>
<body>
	<img alt="pic.jpg" src="./img/fake.jpg">
	
	<br />
	
	<img title="animal" src="./img/pic.jpg" width="50%">
</body>
</html>

 

비디오 태그 - <video>

웹 페이지에서 동영상을 볼 수 있게 만들어 주는 기능을 수행

 

문법

<video src="반드시 상대경로" poster="재생 전 보여질 이미지 경로" width="너비" height="높이" 
	controls="controls" autoplay="autoplay" loop="loop">
</video>

src               : 비디오 파일의 경로 지정

poster        : 비디오가 준비중일 때 보여질 이미지 파일의 경로

width         : 비디오의 너비

height        : 비디오의 높이

controls    : 비디오 재생 도구를 출력할 지 결정

loop            : 비디오를 반복 재생할 지 결정

autoplay   : 비디오를 자동 재생할 지 결정

( 크롬의 경우 음악 혹은 비디오 파일이 자동 재생되는 걸 기본으로 막아두었고 muted (음소거)상태 일때만 자동 재생이 가능하며 muted 설정을 하지 않은 상태에서 자동재생 기능을 실행하고 싶다면 별도의 웹사이트 설정을 해야함)

 

오디오 태그 - <audio>

웹 페이지에서 소리 컨텐츠를 재생하기 위한 태그

 

문법

<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>

src            : 오디오 파일의 경로 지정

controls : 오디오 재생 도구를 출력할 지 결정

autoplay : 오디오를 자동 재생할 지 결정

loop          : 오디오를 반복 재생할 지 결정

(오디오 또한 mute 설정을 하지 않으면 자동재생 되지 않음)

 

비디오, 오디오 태그 예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>video audio 태그 테스트</title>
</head>

<body>
	<video src="./media/gizmo.mp4" controls="controls" width="300" height="300"></video><br />
	
	<video autoplay="autoplay" controls="controls" muted="muted">
		<source src="./media/gizmo.mp4" type="video/mp4">
	</video>
	<br />
	<audio src="./media/leesr.mp4" controls="controls" muted="muted" autoplay="autoplay" loop="loop"></audio>
</body>
</html>

 

 

HTML5 - 시맨틱 태그

문서 구조를 정의하는 HTML5에서 새로 추가된 태그로 <body> 태그 내에서 영역을 구분하는 용도로 사용

 

 

주요 HTML5 시멘틱 태그

<header>   : 헤더 부분. 사이트 소개, 로고, 메뉴, 머리글 등

<footer>    : 푸터 부분. 사이트 제작자나 저작권 관련 정보 등

<nav>       : 네비게이터 부분. 사이트 내 메뉴 등

<section>  : 실제 문서 내용

<article>    : 문서 내용이 많을 경우 영역을 여러 개의 주제별로 로 나눔

<aside>     : 사이드 바와 같은 형태의 영역

 

 

CSS

Cascading Style Sheets의 약자로 마크업 언어가 실제 표시되는 방법을 기술한 언어

 

CSS를 HTML 문서에 적용하는 방법

1. 인라인 방식

HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법, 유지보수가 어려워 권장되지 않는 방식

<body>
    <h2 style="color:green; text-decoration:underline">
        인라인 스타일을 이용하여 스타일을 적용하였습니다.
    </h2>
</body>

2. 내부 스타일 시트

HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용, 해당 HTML 문서에만 스타일을 적용

<head>
	<style type=”text/css”>
 		p { color: red; }
        h2 { color: red; text-decoration: underline; }
	</style>
</head>

3. css 파일을 로드해 적용하는 방식 (import 방식, link 방식)

- link 방식

 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줌, 외부에 작성된 이러한 스타일 시트 파일은 .css 확장자를 사용하여 저장

스타일을 적용할 웹 페이지의 <head>태그에 <link>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용

예시

main.css

@charset "UTF-8";
body{
	color: #0000ff;
	padding: 10px;
	margin: 10px;
}
table{
	color:fuchsia;
	padding: 0;
	margin: 20px;
}
*{
	margin: 0;
	padding: 0;
}
p{
	background: yellow;
	color: green;
}
board.css

@charset "UTF-8";
.board{
	background-color: #FF0;
}
.class1{
	background: red;
	color: white;
}
div.class2 { 
	background: purple; color: blue; 
}
#id1{
	background: navy;
}
css_test.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS 적용방법</title>
	<link href="main.css" rel="stylesheet" type="text/css">
	<link href="board.css" rel="stylesheet" type="text/css">
</head>

<body>
	안녕하세요 너굴입니다<br />
	css 테스트입니다
	
	<p>
	태그 선택자로 스타일이 적용되는지 확인 테스트
	</p>
	<p class="class1">클래스 선택자 </p>
	<p class="class2">클래스 선택자 미 적용</p>
	<div class="class2">div.class2클래스 선택자 적용</div>
</body>
</html>

 

스타일 적용 우선순위

1. 인라인 스타일 (HTML 요소 내부에 위치함)

2. 내부 / 외부 스타일 시트 (HTML 문서의 head 요소 내부에 위치함)

3. 웹 브라우저 기본 스타일

 

CSS 선택자

특정 요소를 선택하여 스타일을 적용할 수 있게 해줌, 선택자와 스타일 선언문을 묶어 CSS Rule-set 이라고 부르며 CSS Rule-set이 모여 Style Sheet가 됨

 

CSS Rule-set 예시

<style>
p { color: red; padding: 5px; }
</style>

p : 태그 선택자

{ } : CSS 선언 블록

color, padding : 속성

red, 5px : 속성 값

 

선택자 우선순위

선택자와 CSS 적용 방법에 따라 우선순위가 달라지며 높은 우선순위를 가진 선택자를 많이 사용할수록 해당 스타일이 우선적으로 적용

 

- 선택자 우선 순위

1. !important

2. 인라인 스타일

3. 아이디 선택자

4. 클래스/속성/가상 선택자

5. 태그 선택자

6. 전체 선택자

 

예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style type="text/css">
		.red{
			color:red !important; /* 주석처리 */
		}
		#p1{
			color: black;
		}
	</style>
</head>

<body>
	<p class="red" id="p1">우선 순위 테스트 !important가 우선적용</p>
	
</body>
</html>

 

css not 선택자

이미 지정된 css 스타일에서 특정한 요소를 제외시킬 경우 사용

일반적으로 선택자는 선택을 하기 위해 사용하지만 이 경우는 선택을 하지 않기 위해서 사용

 

예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>포함하지 않는 요소</title>
	<style type="text/css">
		p:not(.class1){
			color: red;
		}
	</style>
</head>

<body>
	<p>선택</p>
	<p class="class1">선택 제외</p>
	<p class="cl">선택</p>
</body>
</html>

CSS 구조 의사 클래스

구조 의사 클래스를 사용하면 HTML 요소의 계층 구조에서 특정 위치에 있는 요소 선택 가능

 

-  last-of-type

모든 자식(child) 요소 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택

<style>
    p:last-of-type { color: red; font-weight: bold; }
</style>

 

 

CSS 기본 속성

- 패딩

내용(content)와 테두리(border) 사이의 간격인 패딩 영역 크기를 설정, 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받음

 

- 마진(Margin)

테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정, 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않음

 

Q)margin 속성값에 auto를 사용하는 이유?

웹 브라우저가 수평 방향 마진값을 자동으로 설정, 즉 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정

따라서 마진 요소를 포함하는 부모(parent) 요소의 정중앙에 위치

 

 

'HTML,CSS' 카테고리의 다른 글

TIL_210525_CSS_고급 선택자, 미디어 쿼리, Grid  (0) 2021.05.25
TIL_210524_CSS 관련(border, image,float,box) 예시  (0) 2021.05.24
HTML - input 태그 date 타입 관련 예시  (0) 2021.05.21
TIL_210506_프로젝트 문제 해결(simple_shop 회원가입 완료)  (0) 2021.05.06
TIL_210504_CSS 연습 및 예제 (simple_shop 기본 틀)  (0) 2021.05.04
'HTML,CSS' Related Articles more