HTML CSS 기초(1) 악즉참

멋쟁이 사자처럼

HTML CSS 기초(1) 악즉참

youngdeok 2023. 3. 2. 16:39

HTML 문서 해부!

<!DOCTYPE html>

이 문서는 html Living standard 문서! 라는 의미입니다. 사실 명시 하지 않아도 문제가 되지 않는다고 합니다.

<html lang="ko-KR">

HTML 문서의 최상단의 요소 입니다. DOM 구조에서 루트를 담당 하고 있습니다.
lang 속성을 통해 해당 페이지의 주 언어가 무엇인지 설정할 수 있습니다.
언어코드(소문자)-국가코드(대문자).

<head>

기계가 식별할 수 있는 문서 정보를 담습니다.

<meta charset="UTF-8">

메타데이터는 검색엔진의 메타 정보를 살펴보고 다양한 정보를 가져갑니다.

<title></title>

브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 텍스트만 포함하세요(특수 문자X)

</head>

<body>

사용자에게 보이는 영역 입니다.

</body>

</html>

css란?

CSS는 Cascading Style Sheets의 약자입니다.
우리가 작성한 HTML의 스타일, 레이아웃 등을 꾸미는 역할을 합니다.

작성방법

css를 사용하는 3가지 방법!!!

1) 인라인 방식

<body>

<h1 style="background-color: red;">hello world!</h1>

</body>

2) 내부 스타일

<head>

<style>

h1 {

background-color: red;

}

</style>

</head>

<body>

<h1>hello world!</h1>

</body>

3) 외부 스타일

<body>

<h1>hello world!</h1>

</body>

/* style.css */

h1 {

color:yellow;

background-color:black;

}

CSS를 한번 작성해 여러 HTML에 재사용할 수 있습니다. 즉, 불필요한 반복 작업을 줄일 수 있습니다!!.

선택자

css를 적용하기 위해서는 적용하고 싶은 엘리먼트들을 선택 해야겠죠?.

1) 전체 선택자(*)

* {

margin:0;

padding:0;

}

2) 타입 선택자

h1 {

font-weight:bold;

}

p {

font-size: 24px;

}

3) 아이디 선택자(#)

/* style.css */

#header { padding: 10px; }

4) 클래스 선택자

hello wolrd</h1>

<p>Lorem ipsum dolor sit amt</p>

<p class="fc-red">Lorem ipsum dolor sit amt</p>

/* style.css */

.fc-red { color: red; }

5) 특성 선택자([])

[type="button"]

{

border:0; cursor:pointer;

}

[class^="btn"]

{

color:#fff;

background: royalblue;

}

6) 그룹 선택자

h1, h2, h3, h4, h5, h6{ font-weight:bold;}

7) 자손 선택자

현재 태그의 자손 노드들을 선택 할 수 있다.

section p{

font-weight:bold;

}

8) 자식 선택자

자식 노드 전체가 아닌 바로 아래 자식 노드만 가능하다.

section > p{

color:royalblue;

}

연습할 수 있는 url: https://css-speedrun.netlify.app/

CSS Speedrun | Test your CSS Skills

A small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible.

css-speedrun.netlify.app

참조: 위니브, 멋쟁이 사자처럼 프론트 엔드 스쿨