고정 헤더 영역
상세 컨텐츠
본문
<span> 영역묶기, inline요소, 단어만 구역 지정, 특정 구역 지정할 때 사용
<div> 영역묶기, block 요소
inline 요소: 기본 너비는 컨텐츠 만큼만, 크기값을 가지지 않는다, 좌/우 margin만 가질 수 있다.
bolck 요소: 기본 너비는 100%, 크기값을 가진다(width, height), marging을 가질 수 있다.(상하좌우)
class: 범용적 반벅족으로 같은 스타일을 적용하는 속성. CSS에서 속성 적용은 .으로 함.
id: 지정 태그에게만 한 번 부여되는 속성. CSS에서 속성 적용은 #으로 함.
[예시]
<head>
.AAA {
color: red; ▶︎ class를 통해 모두 글자는 red로 변경
}
#a01 {
background-color: #fff00; ▶︎ id를 통해 각각 다른 backgound 색을 적용.
}
#a02 {
background-color: #00fff;
}
#a03 {
background-color: #ff00ff;
}
</head>
<body>
<div id="a01" class="AAA">example01</div> ▶︎ id는 학번, class는 학과 라고 할 수 있다. 즉 id는 중복 될 수 없다.
<div id="a02" class="AAA">example02</div>
<div id="a03" class="AAA">example03</div>
</body>
<br> 줄바꿈
<u> 글자 밑 줄
<em> 글자 이탤릭체로 표시
<strong> 글자 굵게
<a> 링크
[예시]
<a href="link"> ..... </a> ▶︎ 현재 페이지에서 링크 연결
<a href="link" target="_bank"> ..... </a> ▶︎ 새 탭에서 링크 연결
<img> 이미지 태그. 닫힘 태그 없음
src: 이미지 경로. source. 우클릭 > 이미지 주소 복사
alt: 시각 장애인 등을 위한 이미지 설명, 설정 언어에 맞게 입력. 웹표준
<img src="첨부 이미지 경로" alt="이미지에 대한 설명">
<ol> 순서가 있는 것을 나타내는 태그. order list
<ul> 순서가 없는 것을 나타내는 태그. unorder list. 메뉴 목록 또는 네비게이션이라고 부름.
<li> 순서가 있는 목록, 기본 아라비아 숫자로 표시. 기본 아라비아 숫자로 표시
[기본구조 예시]
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
<!doctype html> ▶︎ 이건은 html 5 버전입니다. 라는 뜻
<html lang="en"> ▶︎ 영어로 작성되었다.는 뜻(ko는 한국어 버전)
<head> ▶︎ 부모요소. 눈에 안보이는 요소. style, script
<meta charset="utf-8> ▶︎ 해당 문서의 문자 인코딩 방식을 나타냄. meta 태그는 head 태그 사이 또는 뒤에 있어도 되지만,
반드시 body 태그 앞에 잇어야 한다.
<meta name="viewport" content="width=device-width, initial-scale='">
</head>
<body> ▶︎ 자식요소. 눈에 보이는 뼈대/레이아웃
</body>
</html>
<h1> ~ <h6> 6으로 갈 수록 크기가 작아진다. 1em은 16px이며, 절대값이다. html 태그의 기본값을 30px로 수정하면, h1은 두 배인 60px이 된다.
px은 고정값, em은 창 크기에 맞게 바뀐다.
파비콘: 웹 사이트의 아이딘티티를 담은 단축 아이콘
: 작업 사이즈는 16x16px 또는 32x32px로 작업한다.
: 작업 마무리 단계에 작업한다.
[적용 예시]
<head>
<meta charset="utf-8">
<title> 웹 사이트 이름/설명 </title>
<link rel="icon" href="파비콘 파일 경로">
</head>
float: left; block 요소를 왼쪽으로 붙여 정렬
clear: both; 와 함게 사용해야함. <p>에서 문단이 딸려가지 않도록 지정
rgba: red, green, blue, alpha(alpha는 투명도, 기본값은 1이며, 1에 가까울 수록 불투명)
'이렇게라도 이과를 묻혀보려고' 카테고리의 다른 글
| 21.10.17 개발일지 (0) | 2021.10.17 |
|---|---|
| 21.10.16 개발일지 (0) | 2021.10.17 |
| 21.10.14 개발일지 (0) | 2021.10.14 |
| 21.10.13 개발일지 (0) | 2021.10.14 |
| 21.10.12 개발일지 (0) | 2021.10.13 |
