TIL 17 , 비전공자를위한 HTML/CSS
출처 : https://www.boostcourse.org/cs120/lecture/92869?isDesc=false
공백을 처리하는 법
html은 한 칸 이상의 공백을 무시한다.
세 개의 코드는 결과가 같다.
HTML에서의 주석
주석은 화면에 노출되지 않고 메모의 목적으로만 사용하는 것을 의미합니다.
HTML 파일 내에 주석으로 표시를 해주면 브라우저는 해당 부분을 인식하여 해석하지 않습니다.
문서의 기본구조
<!DOCTYPE html> 은 html로 작성되었다는걸 브라우저에게 알려준다. 최상단에 있어야한다.
<html lang="ko"> 한국어로 작성되었다는걸 알려줌.
<meta charset="UTF-8"> 문자의 인코딩 방식을 지정한다.
<title> 문서의 제목, 브라우저 상단에 노출된다. 접근성, 검색엔진 최적화 측면에서 도움이 된다.
<body> 실제 브라우저 화면에 나타나는 내용들이 들어간다.
<a> 앵커태그
href 속성
링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 합니다.
href 속성의 값은 링크의 목적지가 되는 URL입니다.
<a href="url 주소">화면에 출력될 링크내용<a>target 속성
target속성은 링크된 리소스를 어디에 표시할지 나타낸다.
값으로는 _self, -blank, _top이 있다.
_self는 현재 화면에 표시(target속성 선언되지 않으면 기본적으로 _self)
_blank는 새로운 창에 표시
_parent, _top은 프레임이라는 특정 조건에서만 동작하는 속성, 최근에는 프레임을 잘 쓰지않기 때문에 다루지 않는다.
이 외에도 많은 속성이 있다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
내부링크
<a>를 통해 만들어진 링크가 꼭 외부 페이지로만 이동하는것은 아니다.
내부의 특정 요소로 이동가능, 이를 내부링크라 한다.
href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적는다.
<a href="#page_top">맨 위로</a>
... 중략.
<h1 id="page_top">회사 소개</h1>의미가 없는 컨테이너 요소
태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그입니다.
스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 의미 없는 요소들이 사용됩니다.
새로운 콘텐츠를 표현하기 위해 적합한 의미를 갖는 태그들이 생기기도 하지만
적합한 태그가 없는 경우에도 사용합니다.
또, 문서의 스타일이나 데이터 전송 등과 같은 부가적인 기능을 위해서도 사용됩니다.
div(division) 태그는 블록 레벨 태그입니다.
블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현합니다.
span 태그는 인라인 레벨 태그입니다.
인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들입니다.
리스트요소
리스트는 일련된 항목들이 나열된 것들을 의미합니다.
<ul>
ul(unordered list) 태그는 순서가 없는 리스트.
<ul>
<li> 콩나물</li>
<li> 파</li>
<li> 국 간장</li>
</ul> - 콩나물
- 파
- 국 간장
<ol>
ol(ordered list) 태그는 순서가 있는 리스트.
- 아침에 일어난다.
- 개밥준다.
- 소밥준다.
- 깨털어
<dl>
dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용합니다.
<dl>은 앞서 배운 <ul>, <ol>과는 구조가 조금 다르다.
<ul>, <ol>은 항목을 단순히 나열하는 구조지만,
<dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조입니다.
<dl>
<dt>소머리국밥</dt>
<dd>소고기를 넣은 국밥</dd>
<dt>돼지국밥</dt>
<dd>돼지고기를 넣은 국밥</dd>
<dt>양선지해장국</dt>
<dd>양선지 맛있다.</dd>
</dl>▼
소머리국밥 소고기를 넣은 국밥 돼지국밥 돼지고기를 넣은 국밥 양선지해장국 양선지 맛있다.<dt> : 용어를 나타내는 태그
<dd> : 용어에 대한 정의 또는 설명을 나타내는 태그
용어 하나에 여러 정의가 들어갈 때, <dd>를 한 개 이상 쓰는 것이 가능합니다.
fd
이미지 요소
<img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그 입니다.
src 속성
<img>의 필수 속성으로 이미지의 경로를 나타내는 속성입니다.
alt 속성
이미지의 대체 텍스트를 나타내는 속성.
웹 접근성 측면에서 중요한 속성입니다.
src 속성과 더불어 반드시 들어가야 하는 속성입니다.
width/height 속성
이미지의 가로/세로 크기를 나타내는 속성입니다.
값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산됩니다.
width/height는 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성을 선언하는 것이 성능적인 측면에서 좋습니다.
width/height 속성이 없으면 이미지는 원본 크기대로 노출되며,
둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경됩니다.
반면 두 속성 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경됩니다.
상대경로와 절대경로
src 속성에는 이미지의 경로가 들어가며, 이미지의 상대경로와 절대경로가 있습니다.
상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이고,
절대경로는 실제 그 이미지가 위치한 곳의 전체 경로입니다.
<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">
<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">
상대 경로에서의 './'는 페이지가 있는 현재 폴더를 나타냅니다.테이블요소
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| Sum | $180 |
<table> //표를 나타내는 태그
<caption>Monthly Savings</caption> //표의 제목을 나타냄
<thead> //제목 행을 그룹화
<tr> //행을 나타내는 태그
<th>Month</th> //제목 셀을 나타내는 태그
<th>Savings</th>
</tr>
</thead>
<tbody> //본문행을 그룹화
<tr>
<td>January</td> //셀을 나타내는 태그
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot> //바닥행을 그룹화
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
<table> : 표를 나타내는 태그
<tr> : 행을 나타내는 태그
<th> : 제목 셀을 나타내는 태그
<td> : 셀을 나타내는 태그
<caption>: 표의 제목을 나타내는 태그
<thead>: 제목 행을 그룹화하는 태그
<tfoot>: 바닥 행을 그룹화하는 태그
<tbody>: 본문 행을 그룹화하는 태그
하나의 <table>은 하나 이상의 <tr>로 이루어져 있으며,
<tr>은 셀을 나타내는 <th>, <td>를 자식으로 가지게 됩니다.
표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 됩니다.Author And Source
이 문제에 관하여(TIL 17 , 비전공자를위한 HTML/CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heyho9292/TIL-17-비전공자를위한-HTMLCSS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
