[html/css] 서체 다루기&레이아웃

day024·2024년 9월 30일

HTML&CSS&JS

목록 보기
5/15

CSS 기본부터 활용까지 강의 정리

https://www.inflearn.com/course/css-%EA%B8%B0%EB%B3%B8%EB%B6%80%ED%84%B0-%ED%99%9C%EC%9A%A9%EA%B9%8C%EC%A7%80

1. 서체 다루기

1.1 단위

px (고정) / em / rem (유동적)

rem
html 태그에 적용된 font-size의 영향
html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정된다. 가장 바람직한 단위이다

px
모니터 상의 화소 하나의 크기에 대응되는 단위. 고정된 값이기 때문에 이해하기 쉽습니다만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 사용자제

em
부모 태그의 영향을 받는 상대적인 크기. 부모의 크기에 영향을 받는다. rem이 등장하면서 이 단위 역시 사용이 권장되지 않게됨

1.2 컬러

색상 : http://www.w3schools.com/css/css_colors.asp

지정방법 :

h1{color:#FF0000;}

1.3 정렬

text-align 사용

  • left
  • right
  • center
  • justify

1.4 font

1.4.1 font-family

font-family: 서체를 지정하는 속성 

1
2
3
h1{
    font-family: "Times New Roman", Times, serif;
}

h1 태그를 Times New Roman로 지정, 해당 폰트가 없을시 Times를 사용하게되는 코드
마지막 폰트는 포괄적인 폰트로 지정한다.

  • serif (장식이 있는 폰트)
  • sans-serif
  • cursive (흘림체)
  • fantasy
  • monospace (고정폭)

1.4.2 font-weight

폰트의 두께를 나타냅니다. 대체로 bold만 기억하시면 됩니다. bold를 사용하면 폰트가 두껍게 표시됩니다. 

h1{
    font-weight: bold;
}

1.4.3 line-height

행과 행 사이의 간격을 지정, 기본 값은 normal로 수치로는 1.2이다.
이 수치가 기준이다.
ex) 값이 1.2 현재 엘리먼트 폰트 크기의 1.2배만큼 간격을 준다는 의미

p{
    line-height: 1.3;
}

1.4.4 font

폰트와 관련된 여러 속성을 축약형으로 표현하는 속성.
순서를 지켜서 기술하셔야 합니다.

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

font-size와 font-family는 필수이다.

h1{
    font: 15px arial, sans-serif;
}

1.5 웹폰트

웹폰트는 사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용할 수 있는 방법이다.
폰트를 서버에서 다운로드하는 방식이다

https://fonts.google.com/?authuser=1

2. 레이아웃

레이아웃(layout) : 구획을 나누고 적절히 정보를 배치하는 것

2.1 인라인 VS 블럭레밸

html 엘리먼트
block element : 화면 전체를 사용하는 태그
inline level element : 화면의 일부를 차지하는 태그

2.2 박스 모델(box model)

각 태그들이 웹 페이지에 표현될 때 사각형의 형태(box)로 그 태그의 부피감을 결정한다

박스모델 관련 속성들 : width, height, margin, padding, display, border ...

  • margin : 태그와 태그 사이의 여백.
  • padding : 태그와 내부 컨텐츠 사이의 여백
    border: width style color; 순서로 값 지정
  • inline element는 width, height 값이 무시된다

2.2.1 box-sizing

box-sizing : 박스의 크기를 화면에 표시하는 방식을 변경하는 속성.
width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다.
box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정 가능

  • 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있다.

2.3 margin

마진겹침 현상 : 마진겹침(margin-collapsing) 현상은 상하 마진값이 어떤 상황에서 사라지는 현상

  1. 위아래(형제) :엘리먼트 마진값 중에 더 큰 값이 마진값이 된다.

  2. 부모 엘리먼트 :

  • 부모 엘리먼트의 시각적인 요소가 있다면 마진겹침은 일어나지 않음
  • 부모 엘리먼트의 시각적인 요소가 없다면 마진겹침은 부모자식 중 margin 값이 큰 값을 취함
  1. 어떤 엘리먼트에 시각적인 요소가 없고 margin-top, margin-bottom이 서로 다르면 (cf. top-bottom / left&right 치환해서 봐도 됨)
  • 엘리먼트 혼자서 마진이 겹친다고 생각하면 됨
  • 이 엘리먼트 혼자서 마진겹침은 top과 bottom중 margin 값이 큰 값을 취함
  • 엘리먼트가 시각적인 요소가 있다면 위의 1과 똑같은 마진겹침
  • 시각적 요소가 없을 때 마진의 큰 값으로 적용 / 시각적 요소가 있을 때 마진 겹침 일어나지 않음 (총합으로 계산 됨)

2.4 position

엘리먼트의 position 기본 값은 static
포지션은 크게 4가지 : static, relative, absolute, fixed

2.4.1 position: static

  • left/right/top/bottom의 값을 무시함

2.4.2 position: relative

  • left/right/top/bottom을 원래 있던 위치(부모아래)를 기준으로 움직임

2.4.3 position: absolute

  • left/right/top/bottom을 html태그 기준으로 (X)
    -> 정확히는 "가까운 조상 중에 position:static 이 아닌 조상을 기준으로" (모두 없으면 그때, html임)
  • absolute를 하고, offset을 설정하지 않았다면 부모 밑에 그대로 있음
    -> 기본값으로 left, top값이 부모 offset만큼 설정되어 있기 때문
  • absolute로 설정하게 되면 부모와의 링크가 끊김
    -> 크기도 content크기로 바뀜 (따로 설정하면 됨)

2.4.4 position: fixed

  • left/right/top/bottom을 화면 기준 (스크롤에 독립적)
  • absolute와 마찬가지로 부모와의 링크가 끊김
    -> 크기도 content크기로 바뀜 (따로 설정하면 됨)

cf) 우선순위 : left > right , top > bottom

2.5 flex

flex : CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구 레이아웃을 좀 더 쉽게 짜기 위해 고안됨. item과 그것을 담을 container가 필요.

flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야한다.

2.5.1 flex의 여러 속성들

flex-basis : 크기 지정
flex-grow : 아이템들이 컨테이너를 나눠갖는 비율 결정
flex-shrink : 화면이 작아질 때 줄어드는 비율 결정
flex-diretion: 컨테이너 방향 결정(row, column)
flex-wrap : 아이템 크기가 컨테이너 크기보다크다면 줄바꿈
align-items : 수직 관련 정렬
justify-items : 수평 관련 정렬
align-content : 아이템을 그룹핑해서 정렬
align-self : 특정 아이템만 크기 다르게 함
flex : flex-grow + shrink + basis
order : 아이템의 순서 바꿈.

holy grail layout : 이런 형태의 레이아웃을 flex를 통해 쉽게 만들 수 있음

<header>
<section> - <nav>,<main>,<aside> 수평 정렬
<footer>
수직 정렬

2.6 media query

media query : 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능 (즉 반응형 디자인)

2.7 float

Float: 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법 (레이아웃 잡을때 사용)

2.8 다단

다단(multi column): 신문처럼 화면을 분할해서 좀 더 읽기 쉽도록 만든 레이아웃

2.8.1 여러가지 속성

column-count : 컬럼을 몇 개로 나눌지
column-width : 하나의 컬럼의 크기를 몇으로할지 (이 둘은 독립/조합O)
gap : 컬럼 사이 간격
rule-style : 컬럼 사이 선 스타일
rule-width : 컬럼 사이 선 두께
rule-color : 컬럼 사이 선 색깔
column-span : 특정 태그가 컬럼을 초월하게 하고 싶을 때 all 사용

profile
day024
개발하는 감자
이전 포스트

[html/css] 그래픽 & 유지보수

다음 포스트

[JS] 숫자와 문자/변수/비교/조건문

0개의 댓글