I. 시맨틱 영역태그(6)
1. 섹션 내의 영역 태그 용법(22)
main은 꼭 한번만 가능한데, 한번은 나와야할까? 나오지 않아도 괜찮다!
index페이지나 관리자페이지 등은 메인이 없을수도있다.
왜? 음식먹으러 왔는데, 중국집이 요리 홍보위해 시식코너 만들었는데 메인은 없는것이다.'
1) header / main / footer
얘들은 section이 아니기 때문에 제목을 이끌고 있는것들이 아님
2. 블록태그와 인라인 태그의 특징(23)
지금까지는 방만들기였다면, 이제부터는 방과달리 content자체를 꾸며주거나 content를 설명할때 쓰는것이다.
어휘자체에서 의미를 느껴보자
block 는 머릿속에 박스(영역)을 그리고 영역안에 content가 들어간다
inline 은 <>_______ </>
한줄에서있는데, 감싸는 순간 한층내려가는데, 지금부터는 층이 안만들어지고 한줄로 쭉 써지는 것을 의미한다.
지금까지는 내려쓰기였다면, 이제 쭉 옆으로간다
지금까지했는것은 태그를쓰는 순간 내려쓰기가 다 된다.
<u>는 방을만드는것이 아니라, 특정영역에 스타일을 살려주는것이다.
그래서 inline 과 block를 구분하는것이 필요하다.
3. 인라인 태그 간단히 살펴보기 (24)
인라인 태그는 사이트가면 있다
이중에서 사용가능한것이, 없는것이있다.
예컨데 <a> a태그를 모른다고 치자 그렇다고 하더라도 들어가면 자세히 설명되어 있음
모든것을 다쓰는것이 아니라 필요한 것을 쓰면된다.
<b>는 bold체로 해주는것이다.
만약 이탤릭체 원하면 뭘까 <i>태그 로 감싸주면된다. 여기 블럭사이에 content 해주면된다
<del>하면 취소선이 가능하다.
II. 인라인 태그 학습을 위한 준비(7)
1. 기본스타일의 차이로 알 수 있는, 블록태그와 인라인 태그 구분 (25)
(1) 블록 내부(인라인)의 구조를 잡아줄 것 : 블록의 내용을 꾸며주는 태그들
컨텐트와 가장 가까이 있는 블럭태그는 컨텐트 블럭태그가 5가지이다.
제목 문장 목록 표 폼 이다 (잊지말자)
<태그크기>
(2) 블록 스타일 태그와 인라인스타일 태그의 영역
hello 이 마크업되었는데 이것이 블럭인지?
블럭임 그렇다면 크기는 높이는 글자 크기만큼, 너비는 현재 보이는 영역전체이다.
hi는 감싸고있지만, hi만큼은 아닌것이 특징이다
hello는 span으로 감싸고있다. 얘는 방이없다. 컨텐트를 감싸고만있다.
컨텐츠 감싸서 딱 그만큼만 가진다.
okay도 마찬가지이다.
(3) 종류에 따른 블록 스타일의 차이점
세개는 각자 마진이나 패딩이 달라도 각자의 공간을 가지고 있기때문에 블록스타일이라고 볼 수있다
(4) 인라인 태그의 기본 스타일의 이해
여기서 방은 3개에 태그는 6개이다.
wrap 은 겉을 싸준것이다.
싼것만큼 컨텐츠 가지는것으로 볼 수있다.
결국 in Line (한줄에 줄 선다) 의미이다
여기서 마크업하는 이유는
1. 구분해서 스타일 따로주기
2. 구분해서 의미부여
3. 구분해서 새로운 컨텐트(이미지 비디오) 주기
2. 인라인 태그의 분류(26)
많은데 나름 종류별로 정리가 가능하다.
3. 인라인 태그 학습을 위한 파일 준비 (27)
(1) a u i b br
a : anchor
도착했을 때 닻내리는 것처럼
앵커처럼 다른 문서와 연결하는 역할을 한다.
이것으로 하이퍼 텍스트만들기 가능하다
이를 이용하기 위해서 메인메뉴에서 상세페이지로 가는 html ( detail.html)을 만들자
그런데 두개를 연결시켜주어야한다
<index.html>
<nav>
<h1>인기메뉴</h1>
<li><a href="detail.html">딸기청</li>a></a></li>
<li>알랜드</li>
<li>아메리카노</li>
</nav>
<detail.html>
<body>
<h1> 메뉴 상세페이지</h1>
<a href = "index.html">Home</a>
</body>그러나 서로 클릭해도, 디렉토리가 같지 않아서 열리지 않는다.
이경우 경로에 대해서 알아보아야한다.
4. 상대경로와 절대경로 (28)
(1) Navigation 을 위한 링크 추가
같은 경로는 같은 폴더에있다고 할수있다.
만약 다른경로에 있으면 두가지방법이 있다.
1) 현재 내가있는 경로에서 시작해서 가는 방법
../ 위 경로
./ 현재경로 -> 이거는 생략가능하다. 즉 현재 디렉토리로 간주하는 것이다.
2) 내가 있는 경로에서 출발이 아니라 무조건 root에서 부터 시작이 있다. (절대경로)
어디에있는 상관없이는 root에서부터 한다. 바로 .없이 / 부터시작한다
무엇을 우선시 하는게 바람직?
절대경로는 바뀌면 다 바꾸어야하는데, 상대경로는 그럴 필요가 적다.
(2) 실습
<index.html>
<nav>
<h1>인기메뉴</h1>
<li><a href="./menu/detail.html">딸기청</li></a>
<li>알랜드</li>
<li>아메리카노</li>
</nav><detail.html>
<body>
<h1> 메뉴 상세페이지</h1>
<a href = "../index2.html">Home</a>
</body>
5. A태그의 target속성
a태그에
가장 중요한것이 href 이다
하지만 다른것도 많다.
target 에서 다른것보다 _blank를 잘 살펴보자
그 외 프레임은 잘 안쓴다 (휴지통에 있음)
<nav>
<h1>인기메뉴</h1>
<li><a target="_blank" href="./menu/detail.html">딸기청</li></a>
<li>알랜드</li>
<li>아메리카노</li>
</nav>self는 디폴트로서 그 창 그대로 이어가는 것이라면
_blank은 새로운 창을 열어서 하는것으로 볼 수있다.
1. 보충
2. 회고
1) main은 다른곳에서 자료를 보기 힘들다. 여기서만 주로 보는것일까?
'배움 __IL > addtionalFrontEnd' 카테고리의 다른 글
| TIL : JavaScript 특유 함수개념 정리 (0) | 2023.01.08 |
|---|---|
| TIL : 웹퍼블리싱 HTML 4회 (8,9) (0) | 2023.01.07 |
| TIL : DOM 2회 (0) | 2023.01.05 |
| TIL : 웹퍼블리싱 HTML 2회 (5) (0) | 2023.01.04 |
| TIL : 웹퍼블리싱 HTML 1회 :SIMPLE (1~4) (1) | 2023.01.04 |