코드스테이츠 1주차 HTML

0. html 마크업 언어로 화면에 구조를 만들어 주는 언어(html 도 <태그>라는 조건을 찾아 그 안에 속성을 이용하여 값을 넣는 구조라고 할 수 있다

 

 

1. 알아야할 Tag

2. 각 각의 태그 별 의미

따로 입력 값을 넣지 못하는 tag

=========================================

1.  <img src > : 이미지를 넣게 해줌

2. <a href></a> : 링크를 넣게 해줌

3.  <ol> => order list , 순서를 포함한 리스트 형태

4.<li> : 리스트의 형태

5.<ul> => unorder list 순서가 없음

 

입력 값을 넣을 수 있는 tag

=========================================

6. <input Text,Radio, Checkbox='' placeholder></input>

 

    Text --> 비밀번호

    Radio --> 객관식 문제를 만들 때 근데 만약 div로 그룹화를 하지 않으면 두 개다 선택되는 경우가 있음

7.Textarea ==>  줄바꿈이 가능한 줄바꿈이 가능

8.<button></button>

9. <p> --> 문단을 표현할 때 쓰임.

10.<section > 논리적인 묶음을 정리할 때 써줌 vs <article>은 독립되게 적을 때 쓰임 <div> 는 또 다르게 쓰임.

11. 

 

 

더 훌룡한 프론트 앤드 개발자가 되기 위해서 해야할 일

1. 유저의 관점에서 어떻게 하면 화면 구성을 짜야 하는지를 고민( 클론 코딩을 통해서 감각을 익힐 수 있음)

2. 정렬이나 배색에 대한 감각( 클론 코딩을 통해서 감각을 익힐 수 있음)

 

 

시맨틱 태그의 등장 ==> 어디에 무엇이 있는지를 고민하는 태그!!

<header> <main> <nav> <aside> <footer> 태그는 <div> 태그와 똑같습니다.

 

 

id와 class의 사용법

id:는 어디 한 색션에 <li> <li>를 바꾸고 싶을 때 각 각 같은 id 로 li에 지정하면 잘못된 형태이다 그 대신에 class를 통해서는 같은 이름이 가능하다.

 

#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음 예를 들어 여러 태그(10개 이상)의 내용이 있을 때 같은 색과 폰트를 조정할 때 편리함
특정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용 똑같은 스타일을 적용하려고 했으나 하나만 바꾸고 싶을 때는??

 

수십개의 매뉴( 뉴스, 연예, 기술....) 등에서 하나만 폰트 수정이 필요하다 

1. 그 부분만 새로운 클레스를 만들어 수정

2. menu selected 를 이용해서 사용

 

 

   .selected{

     font 123;

   }

 

 

 

 

글자와 배경색 폰트 지정 속성

{

font-family

color

background-color

border-color

font-size

 

만약 원하는게 없으면 구글폰트에서 임배드 하면 됨.

 

 

 

}

알아야 할 몇가지 단위

글꼴의 크기에서는 단위가 무엇보다 중요합니다. 글꼴의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있습니다.

예를 들어 vw ,vh를 쓰면 상대적으로 화면이 줄어도 그 비율을 맞추나 px를 기준으로 하면 화면이 작아졌을 때 문제가 생길 수 있다.

• 절대 단위: px, pt 등
• 상대 단위: %, em, rem, ch, vw, vh 등
• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height

처음 html 을 짤 때 생각해야 하는 것

1.전체적인 html 구조를 파악한다. 

 

1. Q 어디에 지정 영역이 내가 원하는 만큼 들어갔는지를 어떻게 알까?

1.구조에서 얼마나 이 영역이 차지하는지를 색깔로 표시하자

 

 

 

2. % 와 px의 차이는 무엇인가??

 

 

3. <span> 같은 경우는 px이 먹지 않는데요??  display의 중요성 꼭 공부해야함

     width height 에 px을 줘도 들어가지 않는다 왜??

    inline-block 박스는 inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가집니다. 

    block 박스와는 다르게 inline 박스는 width, height 속성이 적용되지 않습니다. 이번엔 위 CSS에서 span에 대한 속성을 다음과 같     이 바꿔보겠습니다.span { background: yellow; display: inline-block; width: 100px; height: 100px; }[코드] CSS에서       span 태그에 'display: inline-block'을 추가합니다.

 

 

 

Q레이아웃에 300px 를 준다고 해서 이게 꼭 300px 이 들어가는 것이 아니다

상황

혹시 어떤 부분이 문제인지 알겠나요? id가 container인 박스의 width 속성에 300px을 지정했습니다. 그러나 개발자도구로 확인한 해당 요소의 width 값은 324px 입니다. CSS에서 지정한 두 요소에 대해 아래와 같이 확인할 수 있습니다.

• #container의 너비는 300px이 아니라, 324px입니다. 브라우저는 다음과 같은 계산을 실행합니다. 300px (콘텐츠 영역) + 10px (padding-left) + 10px (padding-right) + 2px (border-left) + 2px (border-right)
• #inner의 100%는 300px이 아니라, 364px입니다. 브라우저는 다음과 같은 계산을 실행합니다. 300px (300px의 100%) + 30px (padding-left) + 30px (padding-right) + 2px (border-left) + 2px (border-right)

처음 레이아웃 디자인을 할 때 가장 많이하는 실수가 있습니다. 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우입니다. 박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있습니다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만듭니다.

레이아웃 디자인을 조금 더 쉽게하는 방법이 있습니다. 여백과 테두리 두께를 포함한 박스 계산 법입니다. *은 모든 요소를 선택하는 셀렉터입니다. 모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가합니다.  

 

 

 

 

 

 

해결 :그래서 전체 요소(tag)에 

* { box-sizing: border-box; }[코드] 모든 요소에 'box-sizing: border-box'를 추가합니다.

 

 

 

HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요