KDT 포스코X코딩온 웹 과정 14기 4,5일차- 속성

목차

 

 

 

font 관련 속성들

font-weight : 글자의 두깨와 관련된 속성 (대표적인 값 : (normal,400), (bold,700), bolder, lighter,100~900)

#. border, lighter는 상위 요소인 부모와 비교해서 어느정도인가를 나타냄.

font-size : 글자의 크기와 관련된 속성

대표적인 값 : px, em, rem, %,smaller,larger, xx-small~xx-large

line-height : 한 줄의 높이, 행간과 유사

대표적인 값 : 숫자, px,em, rem, %(height와 동일한 값을 넣었을 때, 가운데 정렬)

font-family : 글꼴을 변경하는 속성

 

 

#lorem은 의미없는 문장을 출력해줌.

 

문자에 대한 속성

color : 글자의 색상

text-align : 문자의 정렬방식(left,right,center, justify(양쪽정렬))

text-decoration:문자에 선을 긋는 것

 

 

박스 모델

1. display:none

UI화면상에 보이지 않도록 숨기는 속성

어떠한 영역을 가지지도 않고 완전히 삭제된 것처럼 보이게 함.

visibility:hidden,disabled=true 옵션과 다르게 공간까지 전부 사라짐.

2. display:black

화면의 가로 너비를 기준으로 전체의 한 영역을 차지한다.

가로,세로의 사이즈를 조절할 수 있으며, 지정하지 않으면 width는 브라우저의 가로넒이가 된다.

3.display:inline

컨텐츠 만큼의 크기를 가지며 줄바꿈이 되지 않고, 가로세로 사이즈 조절도 불가능하다.

margin은 상,하에 적용되지 않으며, padding은 시각적으로는 추가되지만 공간을 차지하지는 않는다.

4. display:inline-block

block과inline의 특징을 모두 섞은 속성값이다.

컨텐츠 만큼의 크기를 가지고 줄바꿈이 되지 않지만 사이즈 조절이 가능하다.

 

margin과 padding

 

 

margin : 요소의 외부 여백을 지정하는 속성(0,auto,px,em,vw(화면의 %단위))

padding : 요소의 내부 여백을 지정하는 속성(0,auto,px,em,vw(화면의 %단위))

margin과 padding은 둘다 대입하는 속성값에 따라 적용되는 범위가 달라진다.

# (margin, padding)-적용하고 싶은 위치(top,bottom,left,right)

 

width, height

width : 요소의 가로 너비

height : 요소의 세로 너비

max-width : 요소가 커질 수 있는 최대 가로 너비

max-height:요소가 커질 수 있는 최대 세로 너비

min-width : 요소가 작아질 수 있는 최대 가로 너비

min-height: 요소가 작아질 수 있는 최대 세로 너비

 

Border

border-width, border-style,border-color 등을 이용한 사각형의 4면에 다른 값을 주는 게 가능하다. 

그때, 들어가는 값의 수에 따라 margin, padding 처럼 값이 대입된다.

그리고 border-방향 : 두께 종류 색상, border-방향-속성 :값처럼 설정하는 것 역시 가능하다.

 

Border-radius

border-radius : 요소의 모서리를 둥글게 깎음(px,em,vw 등 다양한 단위값 가능)

                         50%나 height의 절반만큼 값을 줬을때 원이 만들어진다.

 

Box-sizing

       

content-box -> 콘텐츠 영역을 기준으로 크기를 정함.

                     즉, padding, border 값이 width, height의 값에 포함되지 않음.

장점  - 콘텐츠의 유연성 : 지정된 크기에 따라 동적으로 조정되므로, 디자인의 유연성이 높다.

      - 디자인 제어 : 패딩. 테두리를 분리하여 디자인 요소를 더 정교하게 제어 기능

단점  - 레이아웃의 복잡성 : 다 각각 계산해야 하므로 시간과 노력이 소요

      - 계산 오류 가능성

border-box  -> 콘텐츠  영역,padding,border를 포함한 총 크기를 지정.

장점  - 예측 가능성 : 총 너비와 높이가 예측하기 쉽다.

      - 유지보수, 간편한 계산이 가능하다.

단점 : 내부 내용의 공간 감소 : 실제 콘텐츠 영역이 작아짐.

 

 

Opacity

opacity : 요소를 얼마만큼 투명하게 할 것인가?(0으로 할 시 보이지 않음, 0~1까지의 실수)

 

요소를 숨기는 방법

opacity : 0 : 모습만 숨겨짐, 속성 남음, 자리 차지

visibility : hidden -> 모습과 속성을 숨기는 방법/자리 차지

display:none -> 그냥 없애버리는 방법/자리도 사라짐.

 

Overflow

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

들어갈 수 있는 값 

visible : 넘친 내용을 그대로 보여줌

hidden : 넘친 내용을 잘라냄

scroll : 넘친 내용을 잘라내고, 스크롤바 생성

auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

#. overflow-x, overflow-y라는 옵션으로 x,y 축에 다른 값 적용 가능.

 

---

#######실습시간에 풀었던 문제 1#########

내가 풀었던 답

실습 후 나왔던 답

느낀점

#. 문제를 푸는데에만 함몰되어 내가 코딩을 다시 배우고 있다는 부분을 망각한 것 같다.  모든 테그마다, 클래스를 남발하는 게 좋은 방식의 코딩은 아니다. 알아보기 힘들 만큼, 줄이는 것도 물론 안되지만.

 

######실습시간에 풀었던 문제2########

 

느낀점 : margin-top:calc(50vh-5vw)와 margin: calc((100vh - 10vw) / 2) auto의 차이가 궁금하다. 입력한 결과로 봤을 땐 큰 차이는 없는데?

 

#####실습문제 3######

 

 

####실습문제 4#####

 

 

 

####실습문제 5####

 

####실습 문제 6####

 

느낀점 : display:none 옵션의 경우, hover옵션에 의해 사라졌다가, 속성정보까지 다 날라가버려, 생성 class에 의해 깜빡이는 상태가 된다.