23.2.3(금)

o Semantic

<!--

<article> 내용이 있는 부분을 지정하는 경우(내용 없는 부분은 사용하지 않음) 단락의 모임

<aside> 헤더, 메인, 푸터가 아닌 영역을 지정할 때 (퀵메뉴, 광고배너 등)

<figure> 이미지 표시

<main>

<mark>

<nav> 링크로 구성되어 있는 섹션

<section> 주제별 분류(내부에 아티클 네비 어사이드 등으로 나누어 구성 가능)

<time>

-->

o bootstrap: css 프레임워크

o css

*key=이름

*특정 속성만 일시적으로 빼고 싶을 때 --

* css에서는 { 속성1: 값1; 속성2: 값2; }

1. <요소 style =""> 형태로 특정 요소에만 적용

2. <style><style>의 내부에서

1) # 이름값 { 속성: 값;}로 스타일 적용하고 id=이름값에 적용

2) .이름값 { 속성: 값;}로 스타일 적용하고 <요소 class="이름값">출력내용</요소>로 적용

*확장자 css파일은 자체가 <style></style>이기 때문에 이를 입력하면 오류가 뜸

*margin

*padding
1바이트=8비트

영어=1바이트

한글=2바이트

한자=3바이트

css의 인코딩 방식 설정: 맨 위에 @charset "utf-8"; 입력

*{} : 전체 스타일 적용

태그{} : 태그 내부에 스타일 적용

.이름{} : <태그 class="이름">에 스타일 적용

#이름 : <태그 id="이름">에 스타일 적용

o css파일 html에 불러오기(보통 헤드부분에 씀)

<head>

<title>04_external.html</title>

</head>

o 여백 스타일

div {
margin: 20px 50px 75px 100px;

margin: auto;/*수평을 기준으로 가운데 정렬*/

border: 1px dotted #4CAF50;
}

*margin 부모자식 위치 확인해야(부모블럭 안의 자식블럭에 적용된 경우 부모블럭과의 여백이 됨)

o selector

1) 부모태그a>자식태그b { 속성: 값; }

(=태그a 태그b: 1과 동일)

2) 태그a, 태그b {속성: 값;}

+ #태그a 태그b.클래스명 { background-color: blue;}

태그b 내부의 클래스명을 선택할 때는 태그b와 .클래스명 붙여서

#nav>ol>li:nth-child(2) {

font-weight: bold;

background-color: blue;

}

/* 참조 https://www.w3schools.com/cssref/sel_active.asp

a:link - 일반적 링크 및 방문하지 않은 링크

a:visited - 방문했던 링크

a:hover - 마우스 올렸을 때 링크

a:active - 마우스 누르는 순간의 링크 */

활용예)

a:link {color: blue; text-decoration: none;}

a:visited {color: purple; text-decoration: none;}

a:hover {color: black; text-decoration: underline;}

a:active {color: black; text-decoration: none;}

o reset.css

디자인을 보다 수월하고 자유롭게 적용하기 위해 브라우저들이 가지고 있는 디자인 속성을 없애는 css파일

'수업노트' 카테고리의 다른 글

23.2.7(화) (0)	2023.02.07
23.2.6(월) (0)	2023.02.06
23.2.2(목) (0)	2023.02.02
23.2.1(수) (0)	2023.02.01
2023.1.31(화) (0)	2023.01.31

스터디용

23.2.3(금)

'수업노트' 카테고리의 다른 글

티스토리툴바

23.2.3(금)

'수업노트' 카테고리의 다른 글

관련글

티스토리툴바