[패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 20 회차 미션

패스트캠퍼스 파이썬 웹개발 올인원 패키지 후기(20)

파이썬 웹개발 올인원 패키지 20 일차 후기 겸 학습기록 입니다.

오늘은 CSS 속성 중 font 즉, 글씨에 관련된 부분, 배경색에 관련된 부분에 대해 알아보았고.

boxmodel 개념이 무엇인지 배웠습니다. 항상 헷갈리던 부분인데 이번 기회로 확실히 개념을 잡을 수 있었습니다.

그리고 요소의 float 속성과 position에 대해서 배워보았는데요,

좀 더 자세히 알아 볼까요?

 

HTML, CSS - Font, Background

패스트 캠퍼스 파이썬 올인원 패키지 - 프론트엔드 강의 중

font-family 속성

font-family: Arial, Georgia, "Times New Roman", serif;

- font-family는 상속이 됩니다. 따라서 부모 요소에 적용하면 자식 요소에도 적용되지만 예외도 있습니다.

  예를들면 <code> 속성같은경우 부모의 font-family를 상속받지 않아요.

  혹은 font-family 스타일이 지정되어 있으면 상속받지 않아요  

 

font-size 속성 : 글자 크기

font-size : 1.5em;  >> 상대값 >> 합성 이슈 있음

font-size : 1.5rem; >> 합성이슈 해결

font-size : inherit;  >> 부모 값 상속

font-size : 10px; >> 고정값

 

font-weight 속성 : 글자 굵기

 

font-style 속성 : italic, normal

 

font: normal 500 1.5rem Arial, Georgia, Times, serif; << 단축 표기법(폰트패밀리는 마지막)

 

text-align 속성 : 정렬(center, right)

 

line-height: : 줄간격 ( 1, 1.2 , . .. )

 

color 속성 : 글자색(blue, red, #39ef24, rgb(0, 123, 200), rgb(0, 2, 3, ##). . .)

  ## 부분은 투명도 지정

 

background-color 속성 : 배경색(blue, red, ....)

HTML, CSS - Box Model

패스트 캠퍼스 파이썬 올인원 패키지 - 프론트엔드 강의 중

HTML의 모든 요소는 각각의 상자로 표현됩니다.

박스 모델은 콘텐트 영역, 패딩영역, 보더, 마진영역으로 구성되어 있음

 

콘텐트영역 - width, height > 명시적으로 지정하지 않으면 요소의 실제 크기로

   > 인라인 요소는 적용이 안됨(span, a 등) but, 멀티미디어 요소(img 비디오 등)는 적용됨

   > 패딩과 보더는 포함 안됨 > 포함 시키려면 box-sizing을 border-box로 세팅

 

패딩 영역(안쪽 여백) - padding, pt, pr, pb, pl

 

보더 영역(테두리) - border, bt, br, bb, bl > 명시적으로 지정하지 않으면 보더는 없음

   >예) border: 6px dottted black;

 

마진 : 위아래로 위치된 요소끼리는 더 큰 마진 값을 갖고 있는 요소의 마진으로 적용(마진상쇄)

HTML, CSS - float, position

normal flow를 벗어나는 방법

 

h1 {

   display: inline; << width, height 값 안먹음

}

 

h1 {

   display: inline-block << width, height 값 먹음

}

 

 

float 속성

img {

   float: left

}

 

.footer {

   clear: both; << float 해제

}

 

position 속성

relative < 문서 전체 흐름은 안변함

absolute < 자신의 원래 자리가 없어짐

fixed < 브라우저 창을 기준으로 고정된 위치

 

 

 

 

 

패스트캠퍼스 파이썬 인강 자세한 내용은 아래 링크를 참고해 주세요!

 

https://bit.ly/2WG0IXN