코드스테이츠 44기 2일차

오늘은 코드스테이츠 2일차!

시작하기 전에 배운 부분이었지만 모르는 부분은 배우고, 까먹은 부분은 복습할 수 있어서 좋았다!

주어진 자료 이외에도 따로 더 찾아보면서 공부하고 이해하는 시간을 가졌다.

블로깅을 하며 한 번 더 복습했으니 오래 기억하길.. 

습득한 지식

• placeholder 속성 - 입력폼 안에 작성해야 하는 내용에 대한 힌트를 제공할 수 있다. 아래와 같이 ID를 적는 칸에 ID라는 내용이 나와있다.

 

•   와이어 프레임 - "와이어로 설계된 모양" 의미 , 단순한 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것.

1.큰 틀에서 영역 나누기

댓글을 예로들면,

댓글을 입력하는 쓰기 영역과 달린 댓글들을 읽기 영역으로 나눈다.

 

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

입력란은 하나 뿐임으로 ID 로 고유한 이름을 붙여준다. (div #~)

댓글이 달릴 때마다 나오는 아이디, 댓글내용은 반복되는 영역이므로 class를 붙여준다 (div.username)

• HTML요소란?

html 언어로 작성된 문서의 구성요소로 크게 4가지로 나뉜다.

<p style="color:black";>hello</p> 

 

<p> - 여는태그

</p> - 닫는태그

style - 속성명(attribute)

color:black - 속성값(attribute value)

hello - 값

• 시맨틱(semantic) 요소란?

그 자체에 의미를 가지고 있는 요소를 말한다.

즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해주는 요소.

시맨틱 요소가 아닌 div, span요소 등은 해당요소가 무슨 내용인지는 내부 코드를 봐야 알 수 있다.

• HTML5문서

<haeder> 

<nav>

<section>

<aside>

<footer>

와 같은 것들이 있다.

 

• section태그와 article태그의 차이점

section태그 - (주제별 콘텐츠 영역) 문서에서 주제별로 콘텐츠를 묶을 때 사용,

섹션 제목을 나타내는 <h>태그가 함께 사용됨.

 

article태그 - 웹 상의 실제 내용,태그 적용 부분을 떼어내 독립적으로 배포하거나 재사용 하더라도 완전히 하나의 콘텐츠

 

-완벽히 두개가 정의되진 않았다. 왔다갔다 하며 사용!-