-
HTML CSS 8일 완성하기 : 1일차 OT, HTMLhtml ・ css 2023. 2. 5. 19:29
최근 html css 기초지식이 부족하고, 아주 간단한 것도 나에게 설명하지 못하는 현상에 많은 충격을 받았다.
때문에 기초부터 탄탄하게 지식을 쌓고 싶어서 강의를 찾아보기로 마음먹었다.
찾아보다가 유데미 강의들이 가성비가 좋고 질이 좋다고 들었기에! 도전!!
8일 완성이라는 건 그냥 나의 목표로, 오늘(2/5)에 시작했으니 오늘을 포함해서 2/12에 완강하는 게 목표이다.
기록은 나의 자산 ^_____^
아주 간단하게라도 그날그날 공부한 기록을 남겨두기로 했다.
내가 듣는 강의는 여기
오늘은 총 두 개의 섹션을 수강했다.
섹션 1은 오리엔테이션과 다름없고,
섹션 2는 HTML 섹션이었다. 이상! 내용은 밑에 기록한다.
<!DOCTYPE html>🧑💻 이 문서가 HTML 문서라는 것을 브라우저에게 알려준다. (즉, 문서 유형을 브라우저에 알리는 것)
🧑💻 모든 HTML 문서는 문서 유형을 알리며 시작해야 한다.
브라우저가 '이 문서는 HTML 문서다.' 라는 것을 알게 되면 모든 브라우저는 HTML5 사양으로 HTML을 렌더링해야 한다는 걸 알게 된다.
<html lang="en">🧑💻 HTML 페이지가 사용하는 언어를 지정 (문자셋 속성 지정)
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>🧑💻 HTML 페이지 필수이자 기본 구조
🧑💻 body 는 웹페이지에서 볼 수 있는 모든 요소-콘텐츠 를 담는다.
<h1>제목 등</h1>🧑💻 h1~h6 은 머리글을 나타낸다. 텍스트를 논리적인 섹션으로 나눈다.
🧑💻 h1~h6 은 페이지에 몇 개씩 있어도 상관'은' 없지만, 일반적으로 h1은 한 페이지 당 하나씩만 사용한다.
<a href="#" target="_blank">링크</a>🧑💻 #은 아무 의미 없다. 하지만 클릭하면 현재 페이지의 상단으로 이동한다.
🧑💻 target 속성은 새 창열기, 현재 창에서 열기 등을 지정할 때 사용한다.
*Semantic HTML ?
오늘 일차에서 가장 중요한 이야기!
semantic html 이란 의미 중심의 html이라고 보면 된다.
특정 요소들이 의미나 목적이 있다는 것을 의미한다.
그 (시맨틱 한)'특정 요소'를 생각할 때에는
웹페이지에 어떻게 렌더링 되어 보일지보다는 (x)
그 요소가 실제로 의미하는 것이 무엇인지를 생각해야 한다는 것. (o)
*주의해야 할 점은 앞에서 '특정' 요소라고 말한 것처럼 모든 요소가 의미를 가진 태그(시맨틱 태그)라는 건 아니라는 점이다.
왜 시맨틱 태그를 사용해야 할까?
1. 검색 엔진에 최적화
구글 같은 검색 엔진들이 내가 만든 페이지의 콘텐츠를 더 잘 분석할 수 있게 된다.
2. 접근성 up
특히나 스크린리더에 의존하는 사람들에게 있어 접근성을 높여준다.
다시 한번 짚고 넘어가자
HTML에 대해 생각하고 고민할 때 주의할 점은
1. 브라우저에서 실제로 어떻게 보이는가
뿐만 아니라
2. 이 요소들이 실제로 무엇을 의미하는 지를 생각해야 한다.
시맨틱 태그의 예시
1) <b> / <strong> & <i> / <em>
<b>문자를 진하게 하다</b> <strong>문자를 강조하는 의미를 담다</strong><i>문자를 이탤릭체로</i> <em>문자를 강조하다</em>🧑💻 <b> 와 <strong> 그리고 <i> 와 <em>은 각각 문자가 '진하게' 그리고 '이탤릭체'로 표현된다.
페이지 상에서 다른 점은 전혀 존재하지 않는다. 하지만, strong 이나 em 태그를 사용하면 생김새가 변화하는 것은 물론 '텍스트를 강조했다는 의미'를 부여한다.
2) header, nav, article, aside, footer, aside, ul, ol ...
<header> 웹페이지 상단 혹은 작은 단위의 상단을 의미한다. <nav> 내비게이션의 약자 </nav> </header> <article> 기사, 블로그 글, 게시판 ... 독립적으로 구분할 수 있는 구획 <header> 작은 단위의 상단을 의미하기도 해서 article 안에서 사용할 수도 있다. </header> </article> <aside> 페이지의 주요 파트에 있는 정보를 보완하는 부차적인 정보를 담는다. </aside> <footer> 저작권 정보, 전화번호 등 ... </footer>🧑💻 사실 시맨틱 태그들을 사용하지 않아도 div 하나로 내가 원하는 디자인을 구현해 낼 수 있다. 하지만 그러지 않는다. 위에서 설명했던 이유들 때문에! 그리고 코드를 쓰고 읽는 나에게도 훨씬 이해하기 편하다.
🧑💻 그밖에 list는 왜 list로 구현할까? 리스트로 묶어둔 내용들은 관련된 게시물이라고 더 쉽게 주장이 가능하기 때문이다. 시맨틱 태그들을 사용함으로써 안에 소속된 콘텐츠를 더 쉽게 이해할 수 있게 되고, 더 나아가 코드 자체를 사람도 검색엔진도 스크린리더도 이해하기 편하게 해 준다!!
HTML Entity
html에서 특수문자를 적기 위해서는 어떻게 해야 할까?
특수문자를 입력하기 위해 html에서는 entity라는 것을 제공한다.
정~말 많은 특수문자를 제공하고 있는데 솔직히 양을 보고 깜짝 놀랐다 ^👅^);;;;
Copyright © 2023 by Hyem burger사용방법은 바로 이렇게! 정말 쉽다.
문제는 너무 많아서 오히려 찾기 힘들 수 도 있다는 것 ^____^ 하핫 ...
구글에 html entity만 검색해도 많은 백과사전(?)들이 나오지만 클릭 몇 번으로 이동할 수 있도록(ㅎㅎ) 남겨둔다. 여기
1일 차 후기 🍔
1. 나는 정말 기초도 잘 모르고 있었구나.
물론 어떻게 쓰는지는 안다.
하지만 설명을 하지 못한다... 이건 문제 있는 거 아닌가?
그냥 그거 만들려면 이거 쓰면 돼 < 에서 끝나면 안 된다. 나는... 난 개발자가 될 거라고~!
전문가 같은 ... 그런 사람이 될 거라고. 그러면 내가 이걸 "왜" "도대체 왜!!!" 쓰는지 알고 있고, 뜨문뜨문이라도 말할 수 있어야 한다고.
2. 머릿속에서 정리되는 느낌
기초도 잘 모르는 상태 + 심지어 이 정보 저 정보가 난잡하게 흐트러진 상태
였었는데 기초 부분이라 그런지 머릿속에서 정리되어 차곡차곡 쌓인다는 느낌이 들었다.
3. 다시 한번 강조하기, 의미를 생각하며 뼈대 잡기
내가 왜 이 태그를 사용했는지
이 태그에는 어떤 의미가 담겨 있는지
를 생각하고, 고민하면서 html 를 구현하자. 아자!
'html ・ css' 카테고리의 다른 글
HTML CSS 8일 완성하기 : 6일차 웹페이지 개발 프로세스, 반응형 웹페이지 기초 (0) 2023.02.10 HTML CSS 8일 완성하기 : 5일차 CSS 예제 만들기 (0) 2023.02.09 HTML CSS 8일 완성하기 : 4일차 CSS 디자인 가이드라인 (0) 2023.02.08 HTML CSS 8일 완성하기 : 3일차 CSS Layout (0) 2023.02.08 ╰༼.◕ヮ◕.༽つ¤=[]——— CSS I Position 네 가지 속성 끝장내기 (0) 2022.12.10