/ LECTURE

CSS - Intro

이 페이지는 다음에 대한 공부 기록입니다

JAVA(자바), Python(파이썬) 기반의

AI 활용 응용 소프트웨어 개발자 양성 과정

2021.11.10. ~ 2022.05.18.

찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

32일차 수업

CSS

HTML 요소(태그) 사용자들에게 어떻게 보이게 할 것이냐를 정의하는 언어

웹페이지의 스타일과 내용적인 부분을 분리하기 위한 스타일 시트,

HTML에서 세부적인 스타일을 적용시킬 때는 각각 따로 지정을 해주어야 했던 단점이 있음

이러한 단점을 보안하고자 W3C에서 만든 언어 CSS

내용적인 부분을 제외하고 스타일을 담당하기 위한 언어

Cascading Style Sheets

장점

  • 내용과 별도로 스타일 관리

  • 전체 적용과 개별 적용 가능

  • 별도의 파일로 관리하기 때문에 다른 페이지에도 일괄 적용이 가능

문법

  • <head> 태그 내 <style> 태그 안에서 적용시킬 스타일에 대한 정의 선언
<style>
  선택자 {
    속성명: 속성값;
    속성명: 속성값;
    ...;
  }
</style>
<!--
선택자
	id 선택자 (#), 하나의 대상에게만 적용
	class 선택자 (.), 하나의 그룹에게만 적용 
	group 선택자 (*(전체) 또는 ,), 여러 선택자를 ‘,’ 로 구분해서 일괄 적용
-->

스타일 적용 방법

인라인 스타일

  • 태그 안에 style = “”

  • 해당 요소에만 적용하는 스타일을 작성할 때 사용

내부 스타일 시트

  • <head> 태그 내 <style> 태그를 만들어서 사용

  • 해당 문서에만 적용

외부 스타일 시트

  • <head> 태그 안에 <link> 태그를 이용하여 외부에 있는 css 파일을 호출하여 사용

우선순위

  • 인라인 > 내부, 외부 스타일 > 웹브라우저 기본 스타일

property 중복 우선 순위

  • id > class > 가장 최근 작성 코드 순서로 적용

color

색상 이름 : 140개 정의됨 (tomato, teal, …)

RGB : 255 255 255 Red Green Blue의 조합, 각 최댓값 255로 수치화 하여 표현 ( (0,0,0) )

HEX : RGB 의 세 값을 16진수로 두자리씩 총 6자리 표현, 최댓값은 FF로 치환 (#00ff00)

box

모든 요소(태그)는 박스의 모양으로 구성

블록 태그 : 가로 길이가 화면의 끝까지 채워져있는 태그

인라인 태그 : 가로 길이가 내용에 따라 길이가 정해지는 태그

box model

margin

  • 테두리 밖에 있는 공간, 테두리와 다른 요소(태그) 간의 간격

  • 상하 관계에서 마진끼리 중첩 가능, 마진 상쇄 현상

  • 좌우 관계에서 마진끼리 중첩 안됨(*예외 존재)

border

  • 내용과 패딩을 감싼 테두리, 기본 0px

padding

  • 테두리와 내용 간의 간격

  • 상 하 좌 우 수치가 존재

  • 4개 작성 시 상 우 하 좌

  • 3개 작성 시 상 (좌우) 하

  • 2개 작성 시 (상하) (좌우)

  • 1개 작성 시 모든 방향

content

  • 텍스트나 이미지가 들어가는 실질적인 내용 부분