[HTML] Html심화

코드스테이즈 41기 교육 내용을 정리하고 있습니다.

틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

웹 페이지 구조잡기

Html이 마크업언어라 한다. 그렇다면 마크업 언어란 무엇일까?

마크업 언어란 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어이다.

Html로 웹페이지 구조를 잡기 전에, 화면어 어떻게 보여줄지 먼저 생각을 해야한다.

큰틀에서 영역 나누기
각 영역을 태그로 표현하기

실습 - 유튜브 댓글창 구조잡기

유튜브 댓글창이다. 이와 비슷한 구조의 댓글창을 만글어 보려고 한다.

1. 큰틀에서 영역 나누기

댓글 입력 영역과 댓글창영역으로 나눠진다
댓글 입력 영역에서는 사용자 사진 영역, 댓글 추가 영역, 댓글 추가 버튼 영역이 있다
댓글창 영역은 사용자 사진 영역, 사용자 이름 영역, 댓글창 영역, 좋아요버튼영역, 싫어요버튼 영역이 있다.

2. 각 영역을 태그로 표현하기

- 댓글 입력 영역부터 생각해보자. 댓글 입력 영역은 div태그로 크게 묶을수 있을것 같다.

사용자 사진 영역 : img태그를 사용하려 한다.
댓글 추가 영역 : input태그를 사용하려 한다.
댓글 추가 버튼 영역 : button태그를 사용하려 한다.

- 댓글창 영역은 추가 될때마다 리스트 형식으로 내려가니 ul태그로 크게 묶고 추가되는 댓글 각각을 li태그로 묶을수 있다.

사용자 사진 영역 : img태그를 사용하려 한다.
사용자 이름 영역 : div태그를 사용하려 한다.
댓글창 영역 : div태그를 사용하려 한다.
좋아요 버튼 영역 : button태그를 사용하려 한다.
싫어요 버튼 영역 : button태그를 사용하려 한다.

id와 class를 목적에 맞게 사용하기

id : 고유한 이름을 붙일때 사용
class : 반복된 영역을 유형별로 분류할때 사용

- 큰 틀로 정한 댓글 입력 영역<div>태그와 큰 댓글창 영역<ul>태그는 고유하다. 그래서 이름은 id로 붙여야 한다.

- 댓글 입력 영역에서 각각의 태그들은 다른 영역에서 반복될 일이 없다. 댓글 입력 영역의 모든 태그는 id로 붙여야한다

- 댓글창 영역은 <ul>태그 안에서 <li>리스트 형식으로 추가될때 마다 반복적으로 영역이 사용되기 때문에 class로 이름을 붙여야한다

<div id= "writing-sector">
<li class="comment">

생각해보자

selector

강의에서는 html방식의 id와 class 지정 말고, selector방식도 알려주었다.

div#writing-section
li.comment

id경우 태그명#아이디_명, class경우 태그명.클래스_명식으로 사용한다고 한다.

Html문법이 아닌 Css문법으로 알고 있어서 이정도만 알면 될거 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p#idSelector{color: blueviolet}
        p.classSelector{color: lightblue}
    </style>
</head>
<body>
    <p id="idSelector"> ID_Selector </p> 
    <p class="classSelector"> Class_Selector </p>
</body>
</html>

style에서 id, class selector을 다음과 같이 사용할 수 있다.

저작자표시 (새창열림)

'프론트엔드 > Codestates' 카테고리의 다른 글

[CSS] 박스모델 (0)	2022.08.26
[CSS] CSS기초 (4)	2022.08.26
[HTML] Html기초 (0)	2022.08.25
[JavaScript]반복문 (0)	2022.08.24
[JavaScript] 문자열 (0)	2022.08.23