웹1 2일차 (24.01.11), 1일차 복습

 

<단축키>

shift+home 한문장 선택가능 => 방향키 위아래 하면 위아래 문장까지 선택 가능

end 문장끝으로 커서 옮기기

div+tap => 자동완성

ctrl+z => 이전으로

ctrl + 좌우방향키 => 띄어쓰기 기준으로 이동

shift + 좌우 방향키 => 한 글자씩 선택

ctrl+shift+좌우방향키 => 띄어쓰기 기준으로 선택

shift + 위아래 방향키 => 한 문장 전체 선택

ctrl+s => 자동저장

 

 

****마우스보다 키보드로 자유자재로 움직이기

 

 

 

rgba -> red, green, blue, opacity(투명도)

투명도의 설정은 소수점 단위로 설정.

 

태그 color 속성값 설정

1. 색상 이름

ex)  div { backgroud-color : red; }

 

2. rgb

ex) div { backgroud-color : rgb(255, 0, 0) ; }

 

3. rgba

ex) div { backgroud-color : rgba(255, 0, 0, 0.5) ; }

 

4. hax

ex) div { backgroud-color : #ff0000; }

 

https://codepen.io/hayeong0409/pen/ExMgXyy?editors=1100

div 태그 특징 크기

 

body 크기 = 화면크기

body backgroud-color 지정 가능

 

html 문서는 doctype이 선언되어야함.

(codepen은 코드를 쉽게 작성하기 위한 에디터이기 때문에 doctype이 선언된 상태로 숨겨져있음)

 

html문서는 크게 head와 body로 구분되는데,

head => html문서에 대한 정보

body => html문서의 구조 (뼈대)

 

https://codepen.io/hayeong0409/pen/yLwaXby

body 크기

div = 선택자

{     } = 선언부 

각 선언은 속성명과 속성값을 가지며 이는 : 콜론으로 연결.

 

 

 

포토샵 대지를 생성할 때 RGB와 PX단위 인지 확인 후 작업해야 함.

 

CMYK는 인쇄물에 사용되는 컬러(잉크물)이다. (벡터)

CMYK는 웹상에서 표현될 수 없음.

-> 팬톤 컬러는 뽑혀나온 인쇄물과 색을 동일하게 뽑을 수 있고 시각적으로 볼 수 있기 때문에 유명하고 많이 쓰임.

 

rgb는 웹상에서 사용되는 컬러이다. 

 

 

사진을 확대를 하면 여러개의 네모칸과 그 네모칸이 각각 다른 색상으로 이루어짐. -> 픽셀

 

각각의 색상 정보를 가진 픽셀이 모여 하나의 이미지를 만드는 것.  -> 비트맵 이미지 ex) 포토샵, 웹 등

100px -> 100개의 픽셀로 설정 

 

width (너비)는 유연함.

 

 

https://codepen.io/hayeong0409/pen/poYEwVJ

너비속성(width)

 

(html) div 에 아무것도 작성 안하고

(css)에 div 백그라운드 색상 지정했을 때 

아무것도 안나오는 이유는?

높이가 없기 때문이다.

 

ex) 핸드폰에 높이가 없다면 눈에 보이지 않음.

 

태그가 눈에 보이기 위한 조건은

1. 너비 (width)

2. 높이 (height)

3. 색상 (backgroud-color)

위 3개 중 하나만 없어도 눈으로 확인할 수 없다.

 

텍스트가 있을 때 높이가 보이는 이유는 텍스트에는 높이가 있기 때문이다.

 

 

https://codepen.io/hayeong0409/pen/QWoKgZw

높이속성(height)

 

 

사람이 태어날때부터 머리카락, 눈, 팔, 손톱 등을 가지고 태어나는 것처럼,

태그도 높이, 너비, 배경색, display처럼 기본값이 작동하기때문에 눈에 보임.

 

display => 정체성을 나타내는 속성

ex) 사람으로 따지면 여자, 남자 같은 정체성을 나타내는 속성

 

block이라는 정체성을 가진 태그들은 width가 기본값(auto) 일때 100% 작동.

=> width : auto = 100%

 

width가 auto 라는 것이 기본값이라는 뜻.

얘는 모든 태그에 기본적으로 들어가있는 값임. ( 모든 기본값 )

 

-> 그 값은 display가 뭐냐에 따라 조금씩 변화하는데,

그중에 block이라는 정체성을 가진 태그들은 100% 작동된다.

 

 

 

width: auto = 100%라는 의미는

위의 엘리먼트 너비를 그대로 사용하겠다는 뜻.

 

div 위에 엘리먼트는 body이고 (codepen에서는 숨겨져있음) ,

body의 크기 = 화면의 크기 이기 때문에

div도 그대로 크기를 가져와서 화면 너비만큼 나오는 것.

 

 

교재의 이론

https://codepen.io/hayeong0409/pen/WNmGOVv

div크기 원인