danc
danc*dev
danc
  • 분류 전체보기
    • codestates_BE_bootcamp39
      • 주단위 일기
      • 회고
    • programming
      • JAVA
      • SPRING
      • GENERAL
      • LINUX
      • ALGORITHM
      • ERROR_HANDLING
    • web
      • NETWORK
      • DB
      • HTML
      • CSS
    • kr
    • nz

최근 글

인기 글

태그

  • 코드스테이츠 백엔드
  • React에서 Authorization헤더
  • TIL
  • 회고
  • 일기
  • TIL일기
  • 윈도우 11 우분투
  • AOP
  • 코드스테이츠
  • css
  • TIL 일기
  • HTTP

최근 댓글

티스토리

hELLO · Designed By 정상우.
danc
web/CSS

CSS 기초

CSS 기초
web/CSS

CSS 기초

2022. 4. 27. 17:25

CSS

스타일 (스타일 시트 언어) 

효율적인 UI (User Interface)를 통하여 UX (User Experience) 를 사용자에게 제공하는게 주 목적 

정보전달력 & 가독성 향상 / 색약기능, 다크모드 등


 

HTML 안에서의 CSS 적용

>

HTML 태그에 직접 CSS 속성을 적용 할 수 있지만 헷갈릴 우려가 크고 구조와 내용을 담당하는 HTML과 디자인인 CSS를 분리하는 관심사 분리 측면에서 비권장 된다.
(즉 HTML 파일에서 구조와 틀에 관련된 내용만 작업하고 디자인은 CSS파일에서 한뒤 연결 해서 쓴다.) (3번 코드)

다만, CSS 코드가 길지 않으면 HTML 요소에 직접 CSS 속성 추가가 가능하다. (1번, 2번 코드) 

1. Inline CSS style
<nav style="background: #f9f9f9; color: red">.....</nav>


2. Internal CSS style 
// <style>......</style>
<!DOCTYPE html>
<html>
	<head>
    	<style>
        body { background-color: lightyellow; }
        h1 { color: red; }
        </style>
    <head>
    
    <body>
    	
        <h1> bck color is light yellow </h1>
        <p> paragraph </p>
    </body>
    
</html>



3. External CSS style 
<!DOCTYPE html>
<html>
	<head>
    	<link rel="stylesheet" href="mystyle.css">  //css파일 링크
    <head>
    
    <body> 
    	
        <h1> bck color is light yellow </h1>  
        <p> paragraph </p>
    </body>
 
 
(mystyle.css)
body { background-color: lightyellow; }
h1 { color: red; }

 


CSS syntax의 구성

https://www.w3schools.com/css/css_syntax.asp

>

CSS의 selector는 연결되어있는 html의 selector를 따라간다.  즉 위의 코드는 HTML 파일안의 h1 selector를 찾아서 글자색 blue, 폰트 사이즈 12px로 바꾼다. 

하지만 저렇게만 하면 파일 안의 모든 h1 sector들의 스타일을 바꿔버리기 때문에 다른 포스팅에 있는 id나 class를 이용해서 필요한 파트만 적용시킬 수 있다. 

 

id 와 class 선택자

id vs class # 으로 적용 . 으로 적용 한문서에 하나의 태그에만 같은 이름으로 동일한 값을 갖는 요소가 많음 특정 태그에 이름 붙이는 용도 스타일 분류 용도 로고, 상단메뉴, 하단정도 등 반복적

danc9921.tistory.com

 

저작자표시 (새창열림)

'web > CSS' 카테고리의 다른 글

flex 컨테이너 (Parent) 의 속성  (0) 2022.04.28
Layout with Flex Container  (0) 2022.04.28
BOX MODEL  (0) 2022.04.27
FONT  (0) 2022.04.27
Id & Class Selectors  (0) 2022.04.27
  • CSS
  • HTML 안에서의 CSS 적용
  • CSS syntax의 구성
'web/CSS' 카테고리의 다른 글
  • Layout with Flex Container
  • BOX MODEL
  • FONT
  • Id & Class Selectors
danc
danc
Backend 개발자를 목표로 공부 중 입니다.

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.