학교에 교양과목이 있을 정도로 쉬운 축에 속한다는 것을 알고는 있었는데 수강신청 실패와,, 그 외의 배울 수 있는 기회가 없었어서 이번에 처음 다뤄보게 되었다.

그런데 하루 배워도 글씨, 이미지로 깔끔한 한 페이지를 제작할 수 있을 정도로 이해하기 쉽게 되어있어서
첫 날부터 재밌고 유익하게 배울 수 있었다.

✨HTML

: HyperTextMarkup Language

주로 웹페이지 제작에 쓰이는 프로그래밍 언어이다.

요소 구성

작성할 때의 기본적인 형식이다.

void 요소

여기서 End Tag가 없는 태그들을 말한다. ex)<input> <hr> <meta> <link>

비주얼스튜디오에서 .html 형식의 파일을 만들고,
! 작성후 enter키를 누르면 나오는 코드다. 이 상태에서 시작하면 된다.

이 코드들을 더 자세히 살펴보자.

<!DOCTYPE html> 문서의 타입 지정 -> HTML5로 작성된 문서임을 나타냄
<html lang="en"> 문서의 루트 지점 명시, lang 속성으로 문서의 언어가 스크린 리더 등의 장치에서 일관되게 판단되도록
<head> 문서의 제목과 문서의 인코딩 형식 지정
<title> 문서의 이름(제목) 나타냄, 문서당 한 개의 제목 요소 있어야함. -> 사용자 북마크나 검색 엔진에서 식별하는 기준으로 사용
<meta charset="UTF-8"> 메타 데이터 다룸
*메타데이터 : 데이터에 대한 데이터, 어떤 목적으로 만들어진 데이터 -> 주로 기계가 읽고 이해하는 정보,
charset : 문서의 인코딩 방식 지정
<body> 문서의 내용 들어감. 일반적으로 <head>태그 다음에 작성

기본 태그

보통의 html 코드에서는 <특정태그> content </특정태그> 를 기본 형태로 작성된다.

<p> 글 본문</p>
<h1> 글 제목 </h1>
~ <h6>까지 사용가능. <h6>의 구획 단계 가장 낮음
<img src="이미지경로"> 링크 </a>
<button> 버튼 </button>

✨CSS

: Cascading Style Sheets

프론트엔드 개발을 집 짓는 것에 비유한다면 HTML은 기둥을 만들고 CSS는 꾸미는 역할.
HTML에서 홈페이지의 틀을 개발하고, CSS는 그것의 디자인, 위치등의 속성들을 정리에 그 둘을 잇는다.

작성 방법

"A"의 "B"를 "C"로 하겠다.

A : 선택자 -> 대상을 가리킴
B : 프로퍼티
C : 값 -> 프로퍼티를 어떻게 바꿀 것인지

선택자(A){
    프로퍼티(B): 값(C);
}

ex) 페이지의 "모든 <h1>태그(A)"의 "폰트 크기(B)"를 "14px(C)"로 한다.

h1{
    font-size: 14px;
}


### CSS파일의 스타일과 HTML페이지 연결
link 태그 사용, href 속성 통해 CSS 파일 위치 지정, rel로 관계 표현(CSS는 stylesheet로 값 넣음)
```CSS
<link href="./main.css" rel="stylesheet">

선택자

어느 요소에 스타일을 적용할지 대상을 뜻하는 패턴. 지정하는 방식에 따라 명시도나 우선순위가 다르다.

전체 선택자

: '*' 와일드 카드라 불리는 별표 문자 사용

페이지에 해당하는 모든 요소 영향 받음: HTML 요소 이름을 선택지로 사용
타입 선택자
해당하는 모든 요소가 영향 받음: id 앞에 '#'을 붙여 작성
id 선택자
open tag에서 id 속성에 값을 넣어 지정
페이지당 하나만 가지는 단일값으로 정확하게 일치하는 단일 요소에만 지정하고 싶을 때 사용: class명 앞에 '.' 붙여 작성
class 선택자
open tag에서 class 속성 작성
여러 요소에 같은 class 값을 지정해 동일한 스타일 지정할 수 있음 <- id 선택자와 다른 점: "요소 이름[속성명(연산자 값)]" 형태
속성 선택자
html 속성의 값들을 비교한 결과로 스타일 지정.

ex)  
id 속성을 갖는 span요소 선택 -> `<span id="id1">~</span>`id의 접두사가 test인 span요소 선택 -> `span id="id-test"> ~ </span>` 선택

span[id^="test"]{ color: orange; }
span[id]{ color: skyblue; }

선택자 우선순위

: 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할 것인지 결정하는 방법

-> 각 선택자의 점수를 매기고, 가장 높은 점수의 선언을 우선한다.

style 속성 직접 작성하는 방식 : 1000점
id 선택자 : 100점
class 선택지 : 10점
타입 선택자 : 1점
전체 선택자 : 0점

!important: 무한대

!important를 속성 값 옆에 작성하면 우선순위가 가장 높게 부여된다.

div{
    color: blue !important;
}

-> 매긴 점수가 같은 경우 마지막에 작성된 스타일 적용

상단에 작성된 스타일은 상쇄되어 제일 마지막에 작성된 스타일이 우선순위로 적용된다.

div{
    color: blue;
    color: red;
}

-> red적용.

'FE > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 블로그/폼 레이아웃 제작 (0)	2025.06.29
[HTML/CSS] 웹레이아웃 기초 (2)	2025.06.29
[HTML/CSS] 과제 자기소개 홈페이지 제작하기 (0)	2025.06.29
[멋쟁이사자처럼] 12기 합격수기 (4)	2025.06.29

[HTML/CSS] HTML/CSS 기초 정리