-
6주차 개념노트 (HTML, CSS 총정리)메가테라 2022. 9. 25. 15:50
W3C
W3C는 World Wide Web Consortium의 약자로, 웹표준을 제정하고 관리하는 기관이다.
HTML, CSS, DOM, SVG등을 관리한다.
HTML
HTML은 HyterText Markup Language로, 웹 페이지를 만드는 데 사용하는 언어이다.
HTML태그들로 웹페이지를 만들 수 있다.
HTML 태그는 태그 이름을 <>로 감싸서 표현한다.
대부분의 태그는 열고 닫음이 명확해야 한다.
태그 한개로 표현이 가능한 경우에는 <태그이름 /> 와 같이 쓸 수도 있다.
닫는 태그는 태그이름 앞에 /가 있다.
<img> <br> <hr> 등의 종료 태그 없이 시작하는 태그만 있는 태그를 빈 태그라고 한다.
지금은 HTML5가 최신 버전이다.
html문서 최상단에 <!DOCTYPE html>을 써서 HTML5문서임을 명시할 수 있다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> // 문서가 UTF-8문자셋으로 저장되었다는 것을 알려준다. <title>제목입니다.</title> </head> <body> <h1>헤딩입니다.</h1> </body> <footer> </footer> </html>가 기본 포맷이다.
<head>태그는 메타데이터를 정의한다.
메타데이터는 브라우저에 직접 표현되지는 않는 문서에 대한 정보이다.
<title>, <style>, <meta>, <link>, <script>, <base>등의 태그가 <head>에 들어갈 수 있다.
<title>태그에 넣어준 값은 브라우저 탭 이름, 즐겨찾기, 검색엔진 결과 페이지 제목으로 사용된다. 따라서 꼭 넣어주자.
<body>태그 부분은 브라우저에 보여줄 내용을 담는 부분이다.
<footer>태그 부분에는 사업자 번호, Copyright등 페이지 하단에 보여주는 부분을 담아주면 된다.
태그에는 속성값을 넣어줄 수 있다.
<태그이름 속성명="속성값">내용</태그이름> 으로 사용할 수 있다.
<img>태그의 alt속성은 이미지 대체 텍스트로, 웹 접근성을 올려주고, 이미지를 불러올 수 없을 때 이미지 대신 보인다.
HTML에서 주석은 <!--주석 내용-->와 같이 사용한다.
HTML태그의 style속성을 이용해 CSS를 HTML요소에 직접 설정할 수 있다.
태그 종류
- <h1> ~ <h6>
1이 가장 크고, 6이 가장 작다. 제목을 표현할 때 사용한다.
- <div> <span>
블럭 영역을 설정하고 싶다면 div를 활용하고 인라인 영역을 설정하고 싶다면 span을 활용한다.
- <p>
paragraph를 뜻하는 태그이다.
<p>태그 안에서는 여러번의 띄어쓰기나 엔터(줄바꿈)이 모두 한개의 띄어쓰기로만 인식되므로 줄바꿈을 하고 싶다면 <br>태그를 사용해야 한다.
- <br>
break line을 뜻한다.
줄바꿈을 하고 싶을 때 사용한다.
- <b> <strong>
b는 bold를 뜻한다.
텍스트를 굵게 표현하고 싶을 때 사용한다.
<strong>은 중요한 부분이라서 강조하고 싶을 때 사용하고, <b>는 중요하진 않지만 굵게 표시하고 싶은 경우에 사용한다.
- <i> <em>
i는 italic, em은 emphasized text를 뜻한다.
이탤릭체로 표현하고 싶을 때 사용한다.
<em>은 중요한 부분이라는 뜻도 담고 싶을 때 사용한다.
- <mark>
하이라이트 처리를 해준다.
- <s> <del>
del은 delete를 뜻한다.
텍스트 중간에 선을 그어준다.대체되거나 삭제된 텍스트를 표현할 때는 <del>을 사용한다.
- <ins>
insert를 뜻한다.
텍스트 아래에 선을 그어준다.
- <sup> <sub>
각각 superscript, subscript를 뜻한다.
위첨자, 아래첨자를 쓰는데 사용할 수 있다.
수식 등을 입력할 때 많이 사용할 수 있다.
- <q>
quotation을 뜻한다.
짧은 인용구를 쓸 때 사용하고, 앞뒤에 큰 따옴표가 붙는다.
-<blockquote>
인용구로 단락을 만들어준다.
길이가 긴 인용문을 쓸 때 사용한다.
- <abbr>
abbreviation을 뜻한다.
<abbr>태그를 사용한 곳에 마우스를 올려두면 abbr태그의 title속성 값이 나타난다.
- <pre>
preformatted text를 뜻한다.
<p>태그와 달리
HTML에서 작성한 띄어쓰기, 줄바꿈이 모두 반영되어 그대로 표현된다.
- <hr>
horizontal rule을 뜻한다.
수평가로 선을 그려준다.
- <address>
주소를 표현할 때 사용한다.
- <a>
다른 페이지나 다른 사이트로 연결해주는 하이퍼링크다.
href 속성에 클릭했을 때 이동할 URL을 넣어준다.
target 속성으로 어떻게 링크에 연결된 문서를 열 지 정해줄 수 있다.
_blank: 새창/ 새탭에서 열기
_self: 현재 프레임에서 열기
_parent: 부모 프레임에서 열기
_top: 현재 창의 가장 상위프레임에서 열기
프레임 이름: 지정된 프레임에서 열기
텍스트, 단락, 이미지 등 다양한 HTML요소에 사용할 수 있다.링크에 밑줄을 없애고 싶다면 text-decoration을 none으로 설정해주면 된다.
<a name="bookmark">를 설정해주고 <a href="#bookmark">를 설정해준 곳에서 클릭하면 bookmark해둔 곳으로 이동한다.
- <img>
image를 나타낸다.
<img src="이미지 주소" alt="대체텍스트"> 와 같이 사용한다.
- <map>
이미지 맵을 만들 수 있다.
이미지 맵은 이미지의 일부를 클릭할 수 있게 하는 기능을 말한다.
<img>태그의 usemap속성을 map태그의 name 속성과 연결해주면 된다.
<map>태그는 하나 이상의 <area>태그를 갖고, 이 태그가 버튼과 같은 역할을 하게 된다.
- <ul> <ol>
ul은 unordered list ol은 ordered list를 의미한다.
ul은 기본적으로 검정색 작은 원이 아이템마다 붙고, ol은 숫자가 기본적으로 붙는다.
- <dl>
description list를 나타낸다.
<dl> <dt>용어명</dt> <dd>- 뜻</dd> </dl>와 같이 사용한다.
- <table> <thead> <tbody> <tfoot> <tr> <th> <td>
표를 나타낼 때 사용할 수 있다.
<thead>, <tbody>, <tfoot>으로 tr을 그룹화할 수 있다.
<tr>태그는 table row을 나타낸다. 각 테이블 한 줄 한 줄을 표현할 수 있다.
<th>태그는 각 열의 제목을 나타낸다.
<td>태이블은 테이블의 열을 각각의 셀로 나눠준다.
<table> <tr> <th>먹을 것</th> <th>마실 것</th> </tr> <tr> <td>밥</td> <td>사이다</td> </tr> </table>colspan속성으로 열을 합칠 수 있다.
rowspan속성으로 행을 합칠 수 있다.
- <caption>
테이블 상단에 테이블에 대한 설명을 붙일 수 있다.
- <iframe>
inline frame을 나타낸다.
웹페이지 안에 또 다른 웹페이지를 삽입하고 싶을 때 사용한다.
- <form>
사용자에게 입력을 받을 때 사용한다.
form요소 자체는 웹페이지에 드러나지 않고, form요소에 포함된 다양한 input요소로 입력을 받게 된다.
- <input>
type속성에 text, number, password, radio, checkbox, file, select, textarea, button, range, color, date, time, email, url, tel, submit등을 지정해줄 수 있다.
value속성에 값을 넣어주면 입력 필드에 나타나는 초깃값을 설정해줄 수 있다.
readonly속성을 설정해주면 입력필드를 수정할 수 없고 submit할 수는 있는 상태가 된다.
disabled속성을 설정해주면 필드를 수정할 수도 없고 submit도 못한다.
maxlength속성을 이용하면 입력할 수 있는 문자의 최대 길이를 설정할 수 있다.
autocomplete속성으로 자동완성 기능을 사용할 수 있다.
name 속성을 지정해주는 게 좋다.
- <fieldset>
form요소들을 하나로 묶어준다.
<legend>태그를 이용해 fieldset의 제목을 나타낼 수 있다.
- <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>
semantic하게 작성하기 위한 태그들이다.
- <header>
도입부를 나타낸다.
- <nav>
navigation을 나타내고, 이동할 수 있는 링크들의 모임을 나타낸다.
- <article>
그 자체만으로 이해가 되어야 하고, 웹사이트의 나머지 부분과 별도로 읽을 수 있어야 한다.
section요소는 HTML문서의 전체적인 내용과 관련이 있고, article은 문서 전체적 내용과 별도적인 내용에 대해 사용한다.
- <video>, <audio>
비디오를 넣거나 소리를 넣을 때 사용한다.
- <canvas>, <svg>
그래픽 요소를 나타낼 때 사용한다.
canvas 요소의 성능은 화면이 작거나, 픽셀 수가 많을 경우(>10k)에 좋고,svg 요소의 성능은 화면이 크거나, 픽셀 수가 적을 경우(<10k)에 좋다.
canvas svg 픽셀(pixel) 기반 모양(shape) 기반 단일 HTML 요소 DOM의 일부분이 되는 다중 그래픽 요소 스크립트(script)를 통해서만 수정할 수 있음. 스크립트(script) 및 CSS를 통해서도 수정할 수 있음. 그래픽이 주작업인 게임에 적합함. 렌더링 영역이 넓은 응용 프로그램(application)에 적합함. - <dialog>
다이얼로그를 만들 수 있게 해준다.
- <progress>
프로그래스 바를 만들 수 있게 해준다.
- <meter>
진행 상황이 아닌 분수 값 등을 시각적으로 보여주고 싶을 때 사용한다.
- <select> <option> <optgroup>
셀렉트 박스를 select요소로 만들 수 있고 각각의 요소는 option요소로 만들고, option들을 그룹으로 묶어주고 싶을 때 optgroup요소를 활용한다.
CSS
HTML요소들을 스타일링할 때 사용한다.
셀렉터 {속성명: 속성값;} 으로 적용할 수 있다.
selector에는 HTML요소가 들어갈 수도 있고, id, class, 이들의 조합을 쉼표로 구분한 것이 들어갈 수 있다.
id를 셀렉터로 사용하는 경우 #id를 셀렉터 자리에 넣어주면된다.
class를 셀렉터로 사용하는 경우 .class를 셀렉터 자리에 넣어주면 된다.
css에서는 /* */로 주석을 표현한다.
상태에 따라 스타일을 다르게 주고 싶은 경우
요소:hover 마우스가 올라간 상태
요소:active 마우스로 클릭한 상태
요소:focus 포커스를 가진 상태
요소:checked 체크된 상태
요소:enabled 사용할 수 있는 상태
요소:disabled 사용할 수 없는 상태
에 대해 스타일을 정의해주면 된다.
글자
font-family 글자체를 설정해준다.
font-style 이탤릭으로 설정해줄 수 있다.
font-size 폰트 크기를 조절한다. %, em, rem, px를 사용할 수 있다.
font-weight 폰트의 두께를 조절해준다.
text-align 텍스트 정렬을 정해준다.text-decoration 밑줄 등 텍스트에 적용된 효과를 조절한다.
color 글자색을 정해준다.
direction 글자가 써지는 방향을 설정할 수 있다.
letter-spacing 글자 간격을 조절할 수 있다.
word-spacing 단어간 간격을 조절할 수 있다.
text-indent 단락 첫 줄에 들여쓰기를 할 지 정해줄 수 있다.
text-transform 대문자, 소문자 등 case를 조절해줄 수 있다.
line-height 줄 간격을 조절할 수 있다.
text-shadow 그림자 효과를 줄 수 있다.
vertical-align 위아래 방향의 정렬을 도와준다.
background
background-color 배경색을 정해준다.
background-image 배경 이미지를 넣어준다.
background-repeat 배경 이미지를 수평/ 수직 방향으로 반복되도록 설정할 수 있다.
background-position 배경 이미지의 위치를 설정해준다.
background-attachment 스크롤과 무관하게 화면의 특정 위치에 고정시킬 수 있다.
list
list-style-type 리스트 요소 앞의 마커를 설정해줄 수 있다.
list-style-image 리스트 요소 앞의 마커를 이미지로 설정할 수 있다.
box-model
https://opentutorials.org/module/4064/24713 box-sizing border-box로 설정해주면 border까지 포함해서 width, height를 계산해준다.
height 상하 길이를 설정해줄 수 있다.
width 좌우 길이를 설정해줄 수 있다.
max-width 최대 너비를 설정해줄 수 있다.
min-width 최소 너비를 설정해줄 수 있다.
max-height 최대 높이를 설정해줄 수 있다.
min-height 최소 높이를 설정해줄 수 있다.
margin border와 이웃하는 요소 사이의 간격을 설정해줄 수 있다. auto로 설정해주면 부모 요소의 정중앙에 위치한다.
border 내용 + 패딩 영역을 둘러싼 테두리를 설정해줄 수 있다. 두께 스타일 색 순으로 써주면 된다.
padding 내용과 border사이에 영역의 크기를 설정해줄 수 있다.
display
구성 요소들을 보기 좋게 배치하는 작업인 레이아웃을 설정해줄 수 있다.
대부분의 요소들은 기본적으로 block, inline값을 가진다.
inline-block값을 가질 수 있다. inline-block은 해당 요소 자체는 inline요소처럼 행동하지만 해당 요소 내부에서는 block처럼 동작한다.
inline의 경우 width, height를 줄 수 없지만 inline-block은 width, height를 줄 수 있다.
none 으로 설정하면 웹페이지에 나타나지 않는다.
visibility
visible 웹페이지에 나타나게 할 수 있다.
hidden 웹페이지에 나타내지 않게 할 수 있다.
하지만 hidden으로 설정하면 눈에만 보이지 않고 웹페이지 내에 존재한다.
position
static HTML요소의 기본값
relative static 위치에 대한 상대적 위치를 설정할 수 있다.
fixed viewport기준으로 위치를 설정한다. (스크롤과 관계없이 항상 같은 곳에 있다.)
absolute 부모 요소 기준으로 위치를 설정하게 된다.
overflow 내용이 요소의 크기를 넘어갈 때 어떻게 할 지 정할 수 있다.
z-index
겹친 HTML 요소 사이의 쌓인 순서를 조절할 수 있다.
값이 클수록 앞쪽에 위치한다.
Flexbox
display의 한 종류로 레이아웃을 잡을 때 많이 쓴다.
배치할 아이템들을 담고 있는 부모 요소에 display: flex를 써준다.
기본적으로 왼쪽에서 오른쪽으로 요소들이 배치된다.
다른 방향으로 설정하고 싶다면 flex-direction을 설정해주면 된다.
오른쪽에서 왼쪽으로 배치하고 싶으면 row-reverse로 설정하고,
위에서 아래로 배치하고 싶으면 column으로 설정하고
아래에서 위로 배치하고 싶으면 column-reverse로 설정한다.
그러고 나서 요소들의 정렬방식을 justify-content로 설정해준다.
flex-end를 해주면 끝에 요소들이 붙고,
center로 해주면 중앙에 요소들이 위치한다.
space-between하면 꽉차게 요소들 사이에 간격을 두고 배치된다.
space-around를 하면 요소 앞, 뒤, 요소 사이 모두에 여유 공간을 두고 배치된다.
그러고 나서 줄이 여러개 일 때 요소들을 정렬해주고 싶다면 align-items로 설정해준다.
stretch를 하면 최대한 요소들이 늘어나서 꽉채운다.
flex-start를 하면 시작 위치에 배치되고,
flex-end를 하면 끝 위치에 배치된다.
center을 하면 가운데에 배치되고,
baseline을 하면 컨테이너의 기준선에 배치된다.
만약 요소마다 크기가 정해져 있을 때 한 줄이 부모 요소 크기를 벗어난 경우 flex-wrap속성으로 요소를 다음 줄로 넘길지 설정할 수 있다.
no-wrap으로 설정해주면 요소의 너비를 줄여서 한 줄에 배치한다.
wrap으로 설정하면 다음줄로 넘긴다.
wrap-reverse로 설정하면 윗줄에 추가된다.
그리고 각 요소마다 flex: 값 을 설정해주면 그 값에 따라 상대적으로 차지하게 된다.
Grid
display의 한 종류로 레이아웃을 잡을 때 특히 최근 들어 많이 쓴다.
https://www.w3schools.com/css/css_grid.asp 이런 자유로운 레이아웃을 쉽게 설정할 수 있다.
flex와 마찬가지로 grid로 배치할 요소를 품고 있는 요소에 display: grid설정을 해준다.
그리고 각 요소에 grid-area: 그 요소에 붙여줄 이름 을 넣어준다.
그리고 그 이름을 이용해 배치를 해서 display: grid설정을 해준 요소에 grid-template-areas를 넣어주면 된다.
만약 위 이미지 처럼 넣어주고 싶다면
grid-template-areas:
"header header header"
"menu main right"
"menu footer footer";
와 같이 이미지에 중간 중간 끊긴 선들을 가장 바깥쪽 border에 닿을 때까지 이어서 해당 요소 이름들을 넣어주면 된다.
만약 한 칸(cell)을 비워주고 싶으면 .를 넣어주면 된다.
이 때 각 열의 길이를 조절해주고 싶다면
grid-template-columns: 값 값 값...;으로 설정해주면 되고,
행의 길이를 조절해주고 싶을 때도 grid-template-rows: 값 값 값...;
이나 auto를 넣어주면 된다.
repeat(5, 1fr)등으로 상대적 값을 여러번 반복해서 넣어줄 수도 있다.
행, 열 사이에 간격을 주고 싶다면 각각 row-gap, column-gap값을 설정해주면 된다. 두 값을 합쳐서 gap: 값 값;으로 나타내도 된다.
그 이외의 배치를 조절하고 싶다면 justify-items, align-items으로 각 요소들을 배치하는 방식을 바꾸거나
justify-content, align-content로 전체 영역의 배치를 조절할 수 있다.
justify ~는 기본적으로 좌우로 배치하는 방식을 조절해주고,
align ~는 위아래 배치를 조절해준다.
각각에 대한 내용은 이미지를 참고하는 것이 이해하기 쉬울 것 같다.
자주 쓰는 것은 쓰다보면 외워지니 다 외우려고 하기보다 필요할 때 보고 적당한 것을 가져다 쓰면 된다.
https://css-tricks.com/snippets/css/complete-guide-grid/ 
https://css-tricks.com/snippets/css/complete-guide-grid/ 
https://css-tricks.com/snippets/css/complete-guide-grid/ 
https://css-tricks.com/snippets/css/complete-guide-grid/ 
https://css-tricks.com/snippets/css/complete-guide-grid/ 
https://css-tricks.com/snippets/css/complete-guide-grid/ 
https://css-tricks.com/snippets/css/complete-guide-grid/ 
https://css-tricks.com/snippets/css/complete-guide-grid/ 
https://css-tricks.com/snippets/css/complete-guide-grid/