[HTML, CSS] - CSS기초

LEE JI YOUNG·2021년 8월 28일
1-6210830SEB_Fullhtmlcss코드스테이츠
1

HTML/CSS

목록 보기
2/10

VSC EXTENSION1
VSC EXTENSION2
VSC 단축키
VSC Emmet

CSS (Cascading Style Sheets)

  • HTML과 같은 마크업 언어가 표현되는 방법
  • CSS는 반드시 HTML이 있어야만 동작할 수 있음.(폴더 - index.html, index.css)
  • 스타일링을 위한 도구. 구조의 외부와 내부를 꾸미는 역할을 담당
  • CSS를 작성해서 간단한 UI를 만드는 일은 개발자의 기본적인 소양
    • 사용자 인터페이스(UI) : 사람과 컴퓨터 프로그램이 소통할 수 있도록 만들어진 요소
  • Front-end개발자가 필요한 CSS
    : 더 나은 사용자 경험(UX)을 제공, 활자 매체로 출판, 색약이나 장애인이 웹 페이지를 이용에 도움 됨.
    • 레이아웃 디자인 : 콘텐츠의 배치와 위치
    • 최소한의 타이포그래피 (Typography) : 텍스트를 강조하거나 밑줄을 치는 등
    • 검색어 free app icon으로 무료 아이콘 이용 가능
  • CSS 모범사례 참고사이트

1.CSS의 문법 구성

  • 셀렉터 : 태그이름, id, 클래스를 선택
  • 속성 : 요소에 적용할 수 있는 내용 . {속성명: 속성값;}
  • 세미콜론(;) : 속성끼리 구분

2. CSS 스타일을 적용할 수 있는 방법 3가지

: 관심사 분리를 위해 외부스타일 선호.

  • 인라인 스타일 : 같은 줄에서 스타일을 적용하는 인라인 스타일
    • 태그에 직접 스타일을 지정할 때 용이
    • HTML과 섞여 있으므로 인라인 스타일을 많이 작성할 경우 나중에 어느 곳에 있는지 알아내기 어려우므로, 가급적사용을 자제하는 것이 좋다.
<nav style="background: #eee; color: blue">...</nav>
  • 내부 스타일 시트 : CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style태그 내에 작성하는
    • HTML 문서 하나가 고유한 CSS 내용을 가진다고 생각될 때 사용
    • <style></style> 태그를 사용하여 지정
    • HTML 페이지 안에 위치하므로 영향을 주는 범위는 페이지 안의 전체 태그
    • 다른 HTML 페이지에서 똑같은 내용으로 사용하고 싶다면 복사해서 사용
<head>
  <style type ="text/css">
    h1 {font-family:'굴림체'
       font-size:30px; }
  </style>
 </head>
  • 외부 스타일 시트
    • link 태그 : HTML 파일과 다른 파일을 연결하는 목적
      • rel 속성 : 연결하고자하는 파일의 역할이나 특징(CSS는 Stylesheet)
      • href 속성 : 파일의 위치 (절대경로 또는 상대경로)
    • 하나의 스타일로 여러 개의 HTML 페이지에 적용하여 사용하고자 할 때 편리
    • 하나의 스타일 페이지만 바꾸면 연결된 전체 HTML 페이지가 바뀌므로 유지, 보수에 편리
    • 스타일 시트 파일의 확장자는 .css
<head>
  <link rel="stylesheet" href="index.css" />
  <link rel="stylesheet" href="layout.css" />
</head>

3. 기본적인 셀렉터 (selector)

Id와 class 비교

Idclass
표기방식#이름.이름
주의사항한 문서에 단 하나의 요소에만 적용동일한 값을 갖는 요소 많음
사용용도특정 요소에 이름을 붙이는 데 사용스타일의 분류(classification)에 사용

id로 이름 붙여서 스타일링 적용하기

(예) <h4>나 <p> 요소(element)가 여럿 존재 navigation section 아래에 있는 <h4> 요소에만 색을 바꿀때 사용

  • html
<h4 id="navigation-title">This is the navigation section.</h4>
  • css
#navigation-title {
  color: red;
}

class로 스타일을 분류하여 적용하기

하나의 class를 여러 요소에 적용하기
(예) navigation section의 <li> 요소와 footer의 <li> 요소를 구분하여 스타일 적용. id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이므로 모든 <li> 요소에 id를 추가하고 CSS를 적용할 수 없음. li요소에 동일한 class를 추가하면 동일한 스타일을 여러 엘리먼트에 적용할 수 있음.

  • html
<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>
  • css
.menu-item {
  text-decoration: underline;
}

여러 개의 class를 하나의 엘리먼트에 적용하기
여러 class를 하나의 요소에 적용하기 위해서는, 공백으로 적용하려는 class의 이름을 분리

  • html
<ul>
  <li class="menu-item selected">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>
  • css
.menu-item {
  text-decoration: underline;
}
.selected {
  font-weight: bold;
  color: #009999;
}

4. 텍스트 꾸미기

색상 : {color : #ff0000;}

  • 속성값 : HEX(16진수로 RGB가 표현된 값), 주요 색상의 이름
.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

글꼴 : { font-family: "SF Pro KR", "MalgunGothic";}

  • 속성값 : "글꼴이름", "글꼴이름";
    • fallback (표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책)
      : 사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있음. 이런 경우를 대비하여 fallback 글꼴을 추가. 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력하며 입력된 순서대로 fallback이 적용 됨.
  • 웹 폰트 기술 : 개발자가 표현하고 싶은 글꼴을 사용자의 기기에 적용할 수 있도록 필요에 따라 웹에서 다운로드 받게 하는 기술.
    • Google Fonts : 구글폰트 link를 HTML의 link태그를 사용하여 간단하게 embed 할 수 있음.

크기 : { font-size: 24px;}

  • MDN폰트관련내용, w3school폰트관련내용
  • 절대 단위 : px, pt 등
    • 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
    • px : 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않음. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale)되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있음. px은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리함.
  • 상대 단위 : %, em, rem, ch, vw, vh 등
    • 적응형 디자인을 보다 쉽게 만들기 위해 일반적인 경우, 상대 단위인 rem 사용.
    • rem, em 비교 참고
    • rem : root의 글자 크기 (브라우저의 기본 글자 크기가 1rem). 두배 크기: 2rem, 작은 크기: 0.8rem 등으로 조절. 사용자가 설정한 기본 글꼴 root 크기를 따르므로, 접근성에 유리.
    • em : 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어려움.

반응형 웹(responsive web)에서 기준점

  • 반응형 웹 : 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트.
  • 디바이스 크기 별로 CSS를 달리 적용.
  • 보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드 : iPhone 12 Pro Max의 너비는 414px.
  • 보여지는 영역 (Viewport) : vw(viewport width), vh(viewport height)
    • 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트는 100vw, 100vh를 사용해 구현.

기타 스타일링

정렬

  • 가로 정렬 : text-align
    • 속성값 : left, right, center, justify(양쪽 정렬)
  • 세로 정렬 : vertical-align
    vertical-align 속성을 쉽게 떠올릴 수 있지만, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 합니다. 세로 정렬이란, 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있는데, 박스를 먼저 학습한 다음에 이해하는 게 좋음.


5. 박스 모델


모든 콘텐츠는 고유한 영역이 있습니다.

  • 모든 콘텐츠는 각자의 영역을 가짐.
    일반적으로, 하나의 박스 = '하나의 콘텐츠로 묶이는 엘리먼트(요소)들'
  • 박스 크기: width, height로 설정.
    • h1, p, span에 박스크기를 설정해주었을 때 css
    h1 {
  background: gray;
  width: 60%;
}   /* h1은 줄바꿈이 적용되는 block태그 */
p {
  background: rgba(255,84,104,0.3);
  width: 80%;
  height: 200px;
}   /* p는 줄바꿈이 적용되는 block태그 */
span {
  background: yellow;
  width: 100px;
  height: 100px;
}   /* span은 줄바꿈이 적용되지 않는 inline태그 - 박스 크기 설정이 의미 없다. */ ```

줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

  • 박스의 종류

    • block 박스 : 줄바꿈이 되는 박스
    • inline 박스 : 줄바꿈이 없이 옆으로 붙는 박스
    • inline-block 박스 : 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 박스

  • block, inline-block, inline의 특징

blockinline-blockinline
줄바꿈줄바꿈이 일어남줄바꿈이 일어나지 않음줄바꿈이 일어나지 않음
기본 너비(width)100%글자가 차지하는 만큼글자가 차지하는 만큼
width, height가능가능불가능
  • inline 요소를 inline-block으로 변형
    span에게 display: inline-block; 적용하여 width, height를 사용 가능하게 바꿈 
span {
  background: yellow;
  /* 여기부터 */
  display: inline-block;
  /* 여기까지 변경된 내용입니다. */
  width: 100px;
  height: 100px;
}
  • block, inline-block 종류
박스 종류예
block<div> <p> <h1> <header> <footer> <nav> <main> <section> <article> <aside> <figure> <details> <ul> <ol> <li>
inline<span> <a> <button> <img> <input> <select> <object> <script> <embed>

박스를 구성하는 요소

  • border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있습니다.
  • border (테두리) : 심미적인 용도 외에도, 개발 과정 용도(각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인)로 쓰임. border 속성값참고 - mdn
p {
  border: 1px solid red;  /*테두리를 실선으로 확인*/
}
  • margin (바깥 여백) : border를 기준으로 박스 바깥 여백, top, right, bottom, left로 시계방향 
p {  /* 위,우,아래,좌 - 시계방향 */
  margin: 10px 20px 30px 40px;
}
p { /* 위아래,좌우 */
  margin: 10px 20px; 
}
p {  /* 모든방향 */
  margin: 10px ;
}
p {   /* 방향을 특정 */
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
p {   /* 음수 값을 지정 가능 - 다른 엘리먼트와의 간격이 줄어듬. 
(사용 예)화면(viewport)에서 사라지게, 다른 엘리먼트와 겹치게 가능. */
  margin-top: -2rem;
}
  • padding (안쪽 여백) : border를 기준으로 박스 안쪽 여백, margin과 방향 같다.
    CSS 박스 모델을 이해할 수 있다
p {
  padding: 10px 20px 30px 40px;
}

박스를 벗어나는 컨텐츠 처리

  • 박스 크기 < 콘텐츠 크기 : 콘텐츠가 박스 바깥으로 빠져나옴.
  • overflow
    • overflow: auto; : 스크롤을 생성해서 넘치는 콘텐츠의 내용 보여 줌
    • overflow: hidden; : 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 때
    • overflow-x : x방향 스크롤 또는 배열
    • overflow-y : y방향 스크롤 또는 배열
overflow: visible;   /* 박스 밖으로 넘치는 내용 보임 */
overflow: hidden;   /* 숨김 */
overflow: scroll;   /* 스크롤 - 항상 스크롤바 보임 */
overflow: auto;   /* 내용 따라 스크롤 */
overflow: hidden visible;   /* overflow-x, overflow-y를 지정 */

overflow 속성은 x축과 y축을 지정해 가로 방향으로 스크롤하거나 세로 방향으로 스크롤 할 수 있게끔 지정할 수 있습니다. overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 지정할 수 있습니다.


박스 크기 측정 기준

  • content-box는 박스의 크기를 측정하는 기본값이지만 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장
  • box-sizing: border-box; 모든 박스에서 여백과 테두리를 포함한 크기로 계산
  • 일반적으로 box-sizing은 HTML 문서 전체에 적용
* {
  box-sizing: border-box;  /*  *은 모든 요소를 선택하는 셀렉터 */
}
  • 앞으로 레이아웃과 관련된 이야기를 할 때에는 border-box 계산법을 기준으로 이야기

document.querySelector

document.querySelector('.클래스 이름').textContent="바꿀내용"
document.querySelector('#id 이름').textContent="바꿀내용"

profile
LEE JI YOUNG
프론트엔드 개발자
이전 포스트

[HTML, CSS] - HTML기초

다음 포스트

[CSS] 레이아웃, Selector

0개의 댓글