[TIL] HTML/CSS 기초문법

🏁 Day2

웹사이트 제작시 고려사항

1. 웹 표준: 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
2. 웹 접근성: 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식
3. 크로스 브라우징: 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법

구조를 잡을 때 사용하는 태그

목차

• <header> 태그
  웹사이트의 머리글을 담는 공간
• <nav> 태그
  메뉴 버튼을 담는 공간(navigation)
  <ul>, <li>, <a>와 함께 사용

본문

• <main> 태그
  문서의 주요 내용을 담는 태그
  IE(Internet Explorer) 지원 X, 메인이라는 역할을 담당함을 반드시 입력해줘야함
  role=”main” 속성 필수 입력
• <article>
  웹사이트의 주요 이미지나 텍스트 정보를 담고 구역을 설정하는 태그
  태그 내에 구역을 대표하는 타이틀 <h#>태그가 반드시 존재해야함(웹표준)

<main role="main"> <!-- 본문 영역 -->
	<article> <!-- 정보 영역 -->
		<h#>...</#h>
	...
	</article>
</main>

부록

• <footer> 태그
  가장 하단에 들어가는 정보를 표기할 때 사용

<div> 태그

• 임의의 공간을 만들 때 사용

Block 요소 vs Inline 요소

• 두 요소를 비교하는 세 가지 주요 특징
  • 줄바꿈 현상
  • 가로, 세로
  • 상하 배치

Block 요소

• y축 정렬 형태로 출력(줄바꿈 현상 나타남)
  • 공간을 만들 수 있고, 상하 배치 작업 가능
• 대표적인 태그
  • <h>
  • <p>

Inline 요소

• x축 정렬 형태로 출력(한 줄에 출력)
  • 공간을 만들 수 없고, 상하 배치 작업 불가능
• 대표적인 태그
  • <a>

CSS

Cascading Style Sheet

• 정보(HTML)와 디자인(CSS)의 분리
• 문서의 레이아웃과 스타일 정의
• HTML로 작성된 정보를 꾸며주는 언어

CSS 구성 요소

• 선택자
• 속성
• 속성값

선택자 {속성 : 속성값;}

CSS 연동 방법 세 가지

• Inline Style Sheet
  • 태그 안에 직접 원하는 스타일 적용
• Internal Style Sheet
  • <style> 태그 안에 넣기
• External Style Sheet
  • <link> 태그로 불러오기
  • html, css 각각의 문서 안에서 따로 관리하려 상대적으로 가독성이 높고 유지보수가 쉬움

CSS 선택자

• Class Selector
• ID Selector

부모 자식 관계

• <header>  과 <h1> , <p> : 부모자식관계
• <h1> 과 <p> : 형제관계

<header>
    <h1>Header h1</h1>
    <p>Header p</p>
</header>

header { color: red; }
h1 { color: blue; }
p { color: green; }

캐스케이딩

• CSS의 우성순위를 결정하는 세 가지 요소
  1. 순서
  2. 디테일
  3. 선택자

순서에 의한 캐스케이딩

<p>Hello World</p>

/* style.css 문서 */
p { color: red;}
p { color: blue;} /* 우선순위 높음 */

• 나중에 적용한 속성값의 우선순위가 높음

디테일에 의한 캐스케이딩

<header>
	<p>Hello World</p>
</header>

/* style.css 문서 */
header p { color: red;} /* 우선순위 높음 */
p { color: blue;}

• 더 구체적으로 작성된 선택자의 우선순위가 높음

선택자에 의한 캐스케이딩

<h3 style="color: pink" id="color" class="color"> color </h3>

/* style.css 문서 */
#color { color: blue; }
.color { color: red; }
h3 {color: green; }

• style > id > class > type 순으로 우선순위가 높음

CSS 주요 속성

width, height

• width 속성
  • 선택한 요소의 넓이를 설정
  • 고정값(%), 가변값(px)
• height 속성
  • 선택한 요소의 높이를 설정

font

• font-size : 글자크기
• font-family : 글꼴
  • 브라우저마다 지원하는 폰트가 다름.
  • 입력한 순서대로 우선순위 적용.
  • sans-serif는 마지막에 작성하는 디폴트 값.
• font-style : 기울기, 밑줄
• font-weight : 글자 두께
  • 100~900 사이의 숫자를 입력할 수도 있음.

border

• border-style
  • 실선: solid
  • 점선: dotted
  • 주석과 같이 한 줄에 이어 쓸 수도 있음. 이때 쉼표는 작성하지 않고 띄어쓰기만 함.

background

• background-repeat
  • x축으로 반복: repeat-x
  • y축으로 반복: repeat-y
  • 반복하지 않음: no-repeat
• background-position
  • 공간 안에서 이미지의 좌표를 변경할 때.
  • top, bottom, center, left, right 등

박스 모델

margin과 padding의 차이

• margin
  • border 바깥쪽에서 왼쪽에 여백을 만듦
• padding
  • border 안쪽에서 왼쪽에 여백을 만듦
  • 공간이 여백을 포함한 크기로 변경되는 점 유의

Block 요소와 Inline 요소

<p> 태그: Block 요소

<a> 태그: Inline 요소

Block 요소의 특징

• <p> 태그가 대표적
• 줄바꿈 현상이 나타남
• width / height 값 사용 가능 ⇒ 공간 만들기 가능
• margin과 padding 값 사용 가능 ⇒ 상하 배치 작업 가능

Inline 요소의 특징

• 줄바꿈 현상 없음
• width / height 값 적용 불가
• margin / padding / bottom 값 적용 불가

마진 병합 현상

형제지간의 마진 병합

<div class="box1">Hello World</div>
<div class="box2">Hello World</div>

/* style.css 문서 */
.box { margin-bottom: 150px; }
.box { margin-top: 100px; }

margin-bottom 과 bottom-top 중 숫자가 큰 값으로 적용

부모 자식간의 마진 병합

<main role="main">
	<article>
	</article>
</main>

/* style.css 문서 */
article {
	width: 200px;
	height: 200px;
	margin-top: 100px;
}

자식인 <article> 뿐만 아니라 부모님 <main>에도 영향을 미침

레이아웃에 영향을 미치는 속성

display

p { diplay: inline; }
a { display : block; }
a { display : inline-block; }

• Block과 Inline 요소의 성격을 바꿀 때 사용
• inline-block을 사용하면 두 요소의 성격을 모두 가짐

float

<div class = "left">Hello World</div>
<div class = "right">Hello World</div>

/* style.css 문서 */
.left { float: left; }
.right { float: right; }

• 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용
• 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것
• 레이어가 겹쳐지지 않는 상태로 왼쪽에서부터 정렬시키고 싶은 경우 float: left; 을 연속적으로 입력

clear

<header></header>
<aside class="left">Hello World</aside>
<main></main>
<aside class="right">Hello World</aside>
<footer></footer>

/* style.css 문서 */
footer { clear : both; }

• float에 대한 속성을 제어하고자 할 때

브라우저와 공간 사이의 공백 제거하기

<style>
	html, body { margin: 0; padding: 0;}
</style>

• <html>과 <body>태그는 margin과 padding 값을 가지므로 초기화를 해주어야 함

<style>
	* { margin: 0; padding: 0;}
</style>

혹은 *로 모든 html 태그 선택 가능

📚 출처

• 엘리스 SW 엔지니어 트랙 2기 수업자료