[1주차] 20220405 엘리스 TIL (HTML, CSS)

※ 오늘은 내가 중요하다 생각하는 내용, 헷갈렸던 내용 위주로만 발췌하여 적을 예정 ※

자세한 내용은 PDF 보면서 다시 공부하기!!

 

---

01장. 웹사이트의 정보와 디자인

01. 웹을 구성하는 요소

• 웹사이트 제작시 고려사항

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

02. HTML 기본 태그

• HTML이란? (Hyper Text Markup Language) = 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어 (시간이 지남에 따라 HTML에서 자주 사용되지 않는 용어들은 사라지고, 시대에 맞추어 새로운 신조어가 등장)
• HTML 태그 구성 요소

<열린태그 속성 = "속성값">컨텐츠</닫힌태그>

• 태그명 : HTML이 갖고있는 고유의 기능. <열린태그></닫힌태그> 형태로 입력
• 속성 : HTML이 갖고있는 추가정보
• 컨텐츠 : 열린태그와 닫힌태그 사이에 있는 내용물
• 속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것

 

[PDF 1장 23p~]

• <h> 태그 : <h1> 태그는 가장 중요한 정보를 담으므로, 하나의 HTML 문서에서 한번만 사용됨(로고)
• <ul> 태그 : unordered list 의 약자로, 순서가 없는 리스트를 생성할 때 씀. 메뉴 버튼을 만들 때 주로 사용한다. <ul> 태그의 첫번째 자식은 반드시 <li> 태그여야 한다.
• 회사 로고 만들 때 <h1> 태그를 활용한 구조 공식

<h1>
<a>
   	<img>
</a>
</h1>

 

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

• 책의 구조 - 목차, 본문, 부록 / HTML 태그의 구성요소 = 목차(header), 본문(main), 부록(footer)
• <header>, <nav> 태그

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

<ul>
<li><a></a></li>
</ul>

 

• <main>, <article> 태그

• <main> 태그 = 문서의 주요 내용을 담는 태그. IE(Internet Explorer)는 지원하지 않으므로 role="main" 속성 필수 입력!!

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

• <article> 태그 = 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그. 태그 내에 구역을 대표하는 타이틀 <h#> 태그가 존재해야 함(하나 이상 존재하지 않으면 웹 표준에 어긋나게 됨)

• <footer>, <div> 태그

• <footer> 태그 = 가장 하단에 들어가는 정보를 표기할 때 사용
• <div> 태그 = 임의의 공간을 만들 때 사용

 

04. HTML 태그의 두가지 성격

• Block 요소와 Inline 요소

• 두 요소를 구분짓는 세가지 주요 특징 : 줄바꿈 현상, 가로·세로, 상·하 배치

• Block 요쇼 = y축 정렬 형태로 출력(줄바꿈 현상 나타남), 공간을 만들 수 있고(width, height 설정 가능), 상하 배치 작업 가능
• Inline 요소 = x축 정렬 형태로 출력(한 줄에 출력), 공간을 만들 수 없고(width, height 설정 불가), 상하 배치 작업 불가능

• 가장 빠르게 Block/Inline 요소를 구분하는 법 = 줄바꿈 현상 확인하기

 

05. CSS

• CSS란? (Cascading Style Sheet)

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

• CSS 구성 요소

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

• 선택자 : 디자인을 적용할 HTML 영역
• 속성 : 어떤 디자인을 적용할지 정의
• 속성값 : 어떤 역할을 수행할지 구체적으로 명령, 세미콜론( ; ) 필수 입력

• CSS 연동 방법 3가지

1. Inline Style Sheet = 태그 안에 직접 원하는 스타일을 적용 (ex> <h1 style="color:red;">coding</h1>)
2. Internal Style Sheet = <style> 태그 안에 넣기
3. External Style Sheet = <link> 태그로 불러오기 (External Style Sheet는 HTML과 CSS를 각각의 문서 안에서 따로 관리하여 상대적으로 가독성이 높고 유지보수가 쉽다)

 

06. CSS 선택자

• 선택자(Selector)

1. type(태그명) 타입 선택자
2. class 클래스 선택자
3. id 아이디 선택자

 

07. 부모자식 관계

• 부모자식 관계와 형제관계가 있다.
• CSS 속성의 상속. - *부모태그의 모든 CSS 속성이 자식태그에게 상속되는 것은 아니다.

 

08. 케스케이딩

• CSS의 우선순위를 결정하는 세가지 요소

1. 순서 (작성한 순서)
2. 디테일 (얼마나 상세히 선택자를 표기했는지)
3. 선택자 (선택자 종류(type, class, id)에 따라서 우선순위가 달라짐)

• 순서에 의한 케스케이딩 = 나중에 작성한 속성값이 우선순위가 높음
• 디테일에 의한 케스케이딩 = 더 구체적으로 작성된 선택자의 우선순위가 높음
• 선택자에 의한 케스케이딩 = style > id > class > type 순으로 우선순위가 높음

+ 디테일 케스케이딩 우선순위 > 순서 케스케이딩 우선순위

 

09. CSS 주요 속성

• width, height = 특정 영역에 공간을 설정할 때 사용 (px = 고정값)

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

• font

• font-family : 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선순위 적용(쉼표를 기준으로 입력). Sans-Serif는 마지막에 작성하는 디폴트 값(모든 브라우저에서 지원 가능한 폰트이기 때문)
• font-weight : 글자의 굵기 - 100~900 사이의 숫자를 입력할 수도 있음
• font-size : 글자 크기
• font-style : 글자 기울기 정도로 생각하면 됨

• border

• border-style : solid - 실선 / dotted - 점선
• border-width : 선의 굵기 (주로 고정값(px) 많이 사용)
• border-color : border의 색상 지정

=> border는 한 줄에 이어 쓸 수도 있음. 이때, 쉼표는 작성하지 않고 띄어쓰기만 함. 순서도 상관없음.

• background

• background-color : 색상 입력
• background-image : url(이미지 경로(확장명도 같이 입력))
• background-repeat : x축으로 반복(repeat-x) / y축으로 반복(repeat-y) / 반복하지 않음(no-repeat)
• background-position : 공간 안에서 이미지의 좌표를 변경할 때 사용, top, bottom, center, left, right 의 속성값이 있다.

=> background도 border처럼 한 줄에 쓸 수 있다. 띄어쓰기로 구분, 순서상관 없음

(ex> background : yellow url(이미지경로) no-repeat left )

 

• 개발자도구 Elements = HTML문서와 CSS코드를 다 보여주는 영역. Styles에서 체크박스를 해제해보거나, 수치를 변경해보며 도움을 얻을 수 있다. => 원본 파일엔 반영 안됨
• 주석안에 주석을 넣을 순 없다 (주석은 항상 전체주석 개념이기 때문에)
• background-image는 기본적으로 주어진 공간안에 이미지를 빼곡히 채우려는 성질이 있다. -> background-repeat로 제어
• background-position : top bottom left right center - 만약 우측상단에 이미지를 두고 싶다면? => background-position : right top (혼합 사용 가능)
• background 한줄로 적으면 CSS 파일 용량이 작아진다! -> 웹사이트 용량 작아지면 로딩 속도가 빨라짐.

 

---

 

02장. 웹사이트 레이아웃에 영향을 미치는 요소

01. 박스모델

• 박스모델 = 어떠한 공간의 크기를 설정했을 때 그 공간 크기가 어떠한 구조로 구성되어 있는지 그 구성물들 자체를 "박스모델" 이라고 함.

출처 : 생활코딩( https://opentutorials.org/course/718/3798 )

• margin 과 padding 의 차이 = "border(항상 존재함. " 0 " 값으로)" 기준으로 생각하기(밖인가(margin) / 안인가(padding))

• margin 과 padding 작성 방법 : top right bottom left 순서로 한줄에 작성 가능 -> 시계 생각하기
• 개발자도구를 켜서 박스모델을 확인할 수 있다 - 모델 위에 마우스 올리면 영역도 표시됨

 

02. Block 요소와 Inline 요소

• Block 요소의 특징

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

• Inline 요소의 특징

• <a>, <span> 태그가 대표적
• width / height 값 적용 불가
• 줄바꿈 현상 없음
• margin-top , margin-bottom / padding-top , padding-bottom => 사용 불가능(좌우배치는 가능)

 

03. 마진 병합 현상

1. 형제지간의 마진 병합

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

/* style css */
.box1{margin-bottom:150px;}
.box2{margin-top:100px;}

- 이렇게 코드를 작성했을 때 box1과 box2 사이의 여백은 250px이 아니라 150px로 구현된다.

=> margin-bottom 과 margin-top 중 숫자가 큰 값으로 적용된다 (덧셈 아님)

 

  2. 부모자식간의 마진 병합

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

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

- 이렇게 코드를 작성했을 때 article 태그가 아래로 내려오는 것이 아니라, main 태그가 아래로 내려오도록 구현된다.

• 마진 병합 현상 극복방법 = position -> position : absolute 를 준다.

 

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

• display(Block, Inline, Inline-block) = Block 과 Inline 요소의 성격을 바꿀 때 사용. Inline-block 을 사용하면 두 요소의 성격을 모두 가짐.
• float(left, right) = 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용. 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것 - 레이어가 겹쳐지지 않는 상태로 왼쪽에서부터 정렬시키고 싶은 경우 float:left; 을 연속적으로 입력
• clear = float에 대한 속성을 제어하고자 할 때 사용. -> 사용 위치 : float을 마지막으로 사용한 지점, 그 다음에 나오는 태그에 넣어주면 된다.
• 브라우저와 공간 사이의 공백 제거하기

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

/* or */

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

<html>과 <body>태그는 margin 과 padding 값을 가지므로(태생적으로 갖고 있는 값) 초기화를 해 주어야 함.

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

• float는 부모요소의 크기를 기준으로 설정된다. (float 태그를 사용한 지점의 부모태그의 크기가 기준)
• float 사용시 주의점 : float를 사용한 태그의 부모가 float를 사용한 태그보다 크기가 작을 때, 레이아웃이 틀어질 수 있다.

 

05. 쇼핑몰 만들기

• nav ul li.one(띄어쓰기 없이 li.one) => 여러개의 li 태그들 중에서 one 클래스를 가진 애만 선택을 하겠다.
• 요소를 3등분 할 때 = width : 33.33333% (이런식으로 기입하기)
• img{vertical-align : middle} - vertical-align : middle 의 뜻 : 수직정렬을 중앙으로 하겠다(Inline 태그를 대상으로 하는 태그)

=> img 태그에 이 속성을 넣는 이유 : img 태그 특성상 이미지를 넣었을 때 미세하게 공백이 생기는 경우가 있다. 그 공백을 제거하기 위해 이 속성을 넣어주는 것이다(이미지 태그를 사용해서 이미지를 넣어준다면 이 속성도 디폴트로 넣어주는게 좋다).