코드스테이츠 수강_2주차_2일차_HTML,CSS

코드스테이츠 수장 2주차 2일차에는 프론트엔드의 개론(?)을 공부 하였다. 

프론트엔드에서 보편적으로 HTML, CSS, JAVA script를사용한다. 

 

1. HTML

HTML은 만들고자 하는 페이지의 구조, 뼈대가 된다.
(집 짓는것에 비유하면 뼈대를 세우는 일)

2. CSS

CSS는 만들어진 주고에 스타일을 더할때 사용한다. 
(기둥, 벽, 지붕만 갖춰진 건물에 벽지, 타일을 붙여서 꾸미는 일)

3. JAVA script

JAVA script는 기능을 구현, 추가할때 사용한다.
(거의 다 만들어진 집에 수도, 전기를 끌어와서 버튼 누르면 작동하게 함)

이 세가지 요소 중 코드스테이츠는 HTML, CSS를 간략히 설명하였다. 

 

1. HTML 설명 

HTML은 앞에서 설명한 것 처럼 뼈대를 만들 때 사용한다.

HTML 간략 설명 (출처: 코드스테이츠 )

 

HTML의 예시 (출처: 코드스테이츠)

HTML은 tag로 이루어져 있는데, 해당 tag들은 부등호(<>) 로 묶여있는 형태이다.

또한 tag는 대부분 한 쌍으로 시작할때는 <tag>, 끝에는 </tag> 로 해당 태그가 끝났음을 알려준다.

자주 사용되는 HTML요소

1. <div> : 콘텐츠(안에 들어가는 텍스트, 이미지 등)을 한줄 전체로 차지하게 함.( 한줄 전체를 차지 하므로 다른게 이 줄에는 못들어감)
2. <span> : 콘텐츠 "크기만큼" 영역을 차지함. (<div>와 달린 넣고자하는 부분만 쫌쫌따리로 차지하게 할 수 있음)
3. <img> : 이미지를 삽입할때 사용 하는 태그, 이 태그는 예외적으로 해당 태그가 끝났다고 굳이 안써줘도 됨(</tag> 할 필요 없음)
4. <li> : 리스트를 작성할때 사용하는 태그, <ul>. <ol> 태그와 함께 쓰고, <ul>, <ol> 태그 안에 내용으로 씀
5. <ul> : 리스트 작성할때 몸통이 되는 부분, 순서 없는 리스트 만들때 씀 (<ul>안에 <li>넣으면 숫자 안붙음 )
6. <ol> : 리스트 작성할때 몸통이 되는 부분, 순서 있는 리스트 만들때 씀 (<ol>안에 <li>넣으면 숫자가 순서대로 붙음)
7. href : 하이퍼링크 넣을때 사용 (예시 : <a href = "https://www.w3schools.com">This is a link )
   (예시의 <a>요소가 있을때 사용한다, <a>요소는 다른 웹페이지로 연결되는 하이퍼링크를 html에 표시할때 사용)
8. <input> : type 속성을 text, radio, checkbox 등으로 설정해서 입력을 받을 수 있다.
   (text: 글자를 받음, 지정된 칸 안에 받고 줄바꿈 안됨 / radio: 버튼형태이나 복수의 버튼 중 하나만 선택 가능 / checkbox: 우리가 아는 체크박스, 복수 선택 가능)
9. <textatrea> : 텍스트를 입력할 수 있는영역 생성, 줄바꿈 가능(댓글 창 생각하면 쉽다.)

 

2. CSS 설명

CSS는 UI(사용자 인터페이스)를 만드는것이 목적이다

사용자의 의도를 PC에 전달하기 위해 버튼을 이것저것 만드는 거라고 보면 된다.

만약 전자기기를 샀는데, 버튼이 없다면, 직접 케이스를 열고 회로기판에 전선을 붙였다 땟다 하면서 기기를 동작시켜야 하는 수 밖에 없다.

프론트엔트는 이를 방지하기 위한 친절한 버튼을 만드는 것이라고 보면 된다.

버튼을 알아보기 쉽게, 사용하기 쉽게 만드는 것을 UX라이 한다.

그래서 채용공고를 보면 "프론트엔드 UI/UX" 이 부문이 있었구나 한다. 

웹에서 프론트엔드 개발이 되지 않았다면 이러했을 것이다.

일반 사용자가 직접 명령어를? 띠이용? (출처: 코드스테이츠)

일반사용자가 직접 해당 어플리케이션을 모두 판단하여 그에 맞는 명령어를 날려주어야 한다. 

사실상 불가능한 이야기다. 

UI를 만들어 사용자에게 전달해야 우리가 아는 정상적인 상호작용이 가능하다.

사용자가 UI를 통해 어플을 이용 할 수 있다. (출처 : 코드스테이츠)

UI직관적이고 쉬어야 하는게 기본 소양이라고 한다. 

안 좋은 UI의 예시, 맥도날드 키오스크

사용자 입장에서도 조작하기 쉬운제품이 더 좋은 평가를 받는것은 당연하다.

CSS는 이미 짜여진 HTML에 옷을 입히는 것인데, 제작 과정도 그렇다고 보면 된다. 

가령 HTML에서 특정 부분을 CSS로 꾸미고 싶으면 마치 다른 프로그래밍언어에서 라이브러리를 가져오는 방식과 비슷하게 만들면 된다.

html(위), CSS(아래)

위를 보면 HTML에 body가 있다.

CSS의 코드를 보면 body라고 되어있고, 백그라운드, 컬러 등등 설정한 것을 볼 수 있다.

 요약하면 CSS는  HTML의 어디어디 부분을 이캐캐 칠하고 이캐캐 모양 잡아라 라고 하는것이다.

박스 모델

결국에는 웹 페이지를 만드는 것이다 보니, 영역을 구분해서 코드를 작성하게 된다.

html문서의 레이아웃(출처 : 코드스테이츠)

CSS 는 저렇게 나뉘어진 영역에 주의하면서 H1, H2의 크기 등을 지정하는것이다.

지정된 영역은 박스라고 하며, 3가지 특징을 가진 박스들이 있다.

1. block           : 줄바꿈 가능, 100%의 너비를 가짐, width, heigt사용 가능
2. inline-block  : 줄바꿈 불가, 글자가 차지하는 만큼 너비를 가짐, width, heigt사용 가능
3. inline            : 줄바꿈 불가, 글자가 차지하는 만큼 너비를 가짐, width, heigt사용 불가능

 

박스의 구성 요소

위 그림을 볼 때 기준은 Border기준으로 봐야한다. / Border 안쪽으로 Padding, 바깥쪽으로 Margin

박스를 구성할 때 margin은 바깥 여백, padding은 안쪽 여백이다.

해당 박스의 크기를 구할 때는 padding + border 로 구하면 된다.

아래는 박스의 너비 구하는 예시이다.

#container {
  width: 300px;
  padding: 10px;
  background-color: yellow;
  border: 2px solid red;
}

  300px (콘텐츠 영역)
+ 10px (padding-left)
+ 10px (padding-right)
+ 2px (border-left)
+ 2px (border-right)

총 300px가 아닌, 기본 너비(300) + 경계면(2 + 2) + padding(10 + 10 ) =  324px임을 알 수 있다.

직접 코드를 짜면서 이것저것 고려하면서 만들기 힘든 경우 

* {
  box-sizing: border-box;
}

위의 코드를 적용 시 여백과 테두리를 포함한 크기로 자동으로 계산해준다.

경계, 여백, 기본 너비를 더하는 기존 계산법(왼쪽) / 알아서 계산해주는 boder-box(오른쪽)