3주차 강의내용

Seunghwa's Devlog·2021년 2월 24일
CSSweb멋쟁이사자처럼
0

< CSS의 구성 >

  • 선택자(selector) : 스타일을 적용하고자 하는 html 요소를 선택하는 역할
  • 속성(property) : 지정할 스타일의 속성
  • 값(value) : 키워드나 특정 단어를 이용하여 원하는 스타일을 적용한다.
  • 선언 : 속성과 값 한쌍을 의미한다. ( ex. font-size : 18px ) 각 선언이 끝날 때 마다 끝남을 알려주는 세미콜론(;) 을 꼭 써줘야한다.
  • 선언 블록 : 중괄호로 구분되는 선언들의 모음

< HTML에 CSS 적용 >

  • link style

    • css 파일을 따로 만들어 head 태그 안에 링크로 연결하는 방법

    • relation의 약자 rel 로 현재 html 파일과 무슨 관계에 있는 파일인지 명시

    • href는 우리가 link로 걸 css파일의 주소

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>안녕하세요</title>
    <style>
	h1{
      		color: red;
      	}
    </style>
  </head>
  <body>
    <h1>안녕?</h1>
  </body>
</html>
  • inline style
    • 태그 이름 뒤에 style 속성을 직접 추가해 스타일을 지정하는 방법
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>안녕하세요</title>
  </head>
  <body>
    <h1 style="color : red;">안녕?</h1>
  </body>
</html>

< 선택자 >

  • 말 그대로 선택을 해주는 요소 즉, html의 특정 요소들을 선택해 스타일을 적용할 수 있게 해줌
  • 선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하는 역할을 한다
  • 선택자에는 일반적인 태그 이름을 사용할 수 있다
  • CSS에서는 여러 개의 선택자를 콤마(,)를 이용해 한꺼번에 스타일을 지정할 수 있으며 이를 다중 선택자라고 함

< 단순 선택자 >

  • 타입 선택자 (Type Selector)

    • 해당 태그를 가지는 모든 요소에 스타일을 적용한다
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>안녕하세요</title>
    <style>
	h1{
      		p{ color: red; }
      		h2{ color: blue; }
      	}
    </style>
  </head>
  <body>
    <h1>안녕?</h1>
    <p>이것은 첫 번째 단락입니다</p>
    <h2>뭐해?</h2>
    <p>이것은 두 번째 단락입니다</p>
    <h2>hi!</h2>
  </body>
</html>

  • 아이디 선택자 (Id Selector)

    • 아이디 이름으로 스타일을 적용한다

    • 모든 요소들은 각자의 id를 설정할 수 있고 이는 고유값이므로 HTML 문서내에는 동일한 id가 존재할 수 없다

    • 아이디 선택자를 사용해 스타일을 지정할 때는 #과 id를 붙여 써주면 된다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>안녕하세요</title>
    <style>
	h1{
      		p{ color: red; }
      		h2{ color: blue; }
      		#hi{background-color: aqua;}
      	}
    </style>
  </head>
  <body>
    <h1>안녕?</h1>
    <p>이것은 첫 번째 단락입니다</p>
    <h2 id="hi">뭐해?</h2>
    <p>이것은 두 번째 단락입니다</p>
    <h2>hi!</h2>
  </body>
</html>

  • 클래스 선택자 (Class Selector)

    • 비슷한 특징을 갖는 요소를 지정하여 묶어 그룹으로 만들 수 있다
    • 클래스 선택자를 사용해 스타일을 지정할 때는 .과 class 이름을 붙여 써주면 된다
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>안녕하세요</title>
    <style>
	h1{
      		p{ color: red; }
      		h2{ color: blue; }
      		.hello{font-size: 12px;}
      	}
    </style>
  </head>
  <body>
    <h1>안녕?</h1>
    <p>이것은 첫 번째 단락입니다</p>
    <h2>뭐해?</h2>
    <p>이것은 두 번째 단락입니다</p>
    <h2 class="hello">hi!</h2>
  </body>
</html>

  • 전체 선택자 (Universal Selector)

    • 모든 요소에 스타일을 적용한다

    • 전체 선택자를 사용해 스타일을 지정할 때는 *을 사용하여 모든 요소들을 선택한다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>안녕하세요</title>
    <style>
	*{ background-color: white; }
    </style>
  </head>
  <body>
    <h1>안녕?</h1>
    <p>이것은 첫 번째 단락입니다</p>
    <h2>뭐해?</h2>
    <p>이것은 두 번째 단락입니다</p>
    <h2>hi!</h2>
  </body>
</html>

  • 속성 선택자 (Universal Selector)

    • 특정 HTML 속성을 가지고 있는 모든 요소에 스타일을 적용한다
    • 속성 선택자를 사용하여 스타일을 지정할 때는 선택자와 대괄호 사이에 속성과 속성값을 넣어 지정한다
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>안녕하세요</title>
    <style>
	#link[target="_blank"]{color: "red";}
    </style>
  </head>
  <body>
    <h1>링크</h1>
    <a href="https://www.google.com" target="_self">구글 현재창</a>
    <a href="https://www.google.com" target="_self">구글 현재창</a>
    <a href="https://www.google.com" target="_blank" id="link">구글 현재창</a>
    <a href="https://www.google.com" target="_self">구글 현재창</a>
  </body>
</html>

< 복합 선택자 >

  • 두개 이상의 선택자가 모여 의미를 이루는 선택자

  • 자식 선택자
    선택자 A의 모든 자식중 선택자 B와 일치하는 요소를 선택, 자식 선택자는 복합 선택자 이므로 선택자를 두 개 사용하며 중간에 꺽쇠(>)를 써준다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>안녕하세요</title>
    <style>
	article > p {color: red;}
    </style>
  </head>
  <body>
    <article>
      <div>자식1
        <p>후손1</p>
      </div>
      <div>자식2
    	<p>후손2</p>
      </div>
      <p>자식3</p>
    </article>
  </body>
</html>
  • 후손 선택자
    선택자 A의 모든 후손 중 선택자 B와 일치하는 요소를 선택, 후손 선택자 역시 복합 선택자 이므로 선택자를 두 개 사용하며 중간에 띄어쓰기를 써준다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>안녕하세요</title>
    <style>
	article p {color: red;}
    </style>
  </head>
  <body>
    <article>
      <div>자식1
        <p>후손1</p>
      </div>
      <div>자식2
    	<p>후손2</p>
      </div>
      <p>자식3</p>
    </article>
  </body>
</html>

< pseudo 클래스 선택자 >

  • 가상 클래스 라고도 불리며, 요소의 특별한 상태를 지정할 때 쓰인다
  • 특별한 상태에 있을때의 요소 style을 지정한다

EX) a 태그를 통한 예제

  • :link : 방문 하지 않은 링크는 파란색이며, 방문시 자주색으로 바뀜

  • :visited : 방문한 링크를 지정하여 스타일을 지정한다

  • :hover : 마우스 커서를 올렸을 때 스타일을 지정한다

이 외에도 여러가지 예제가 있다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>안녕하세요</title>
    <style>
	a:link { color: yellow; }
    a:visited { color: red; }
    a:hover { color: blue; }
    </style>
  </head>
  <body>
    <a href="https://www.google.com">구글</a>
  </body>
</html>

< 숫자값 >

  • px : CSS에서 절대적인 크기를 나타내는 단위, 디스플레이를 구성하는 단위로 기기마다 다르다

  • em/rem : CSS에서 상대적인 크기를 나타내는 단위

    • em : 현재 스타일이 지정된 요소의 font-size를 기준으로 크기 설정
    • rem : 최상위 요소의 font-size를 기준으로 크기 설정

  • 퍼센트(%) : 상대길이를 지정하는 하나의 방법, 보통 이미지의 레이아웃이나 너비, 높이를 지정할 때 쓰임

< 색상 >

  • hex code : #ff0000과 같이 #키워드 뒤에 16진수가 붙은 형태로 색깔 제공
  • rbg code : 빨강, 파랑, 초록색을 합쳐 색상을 표현하는 방법

< font-family >

  • 폰트의 종류를 정의할 때 사용한다
  • 두 단어 이상으로 이루어져 있거나, 하이픈(-)이 들어간 경우에는 따옴표를 사용하여 하나의 폰트명 이라는 것을 명시해 주어야 한다
  • 여러 개의 폰트를 동시에 지정 가능하다
  • 차례 대로 기기에 첫 번째 폰트가 없다면 두 번째 폰트를 적용하는 식

< 웹 폰트 사용하기 >

  • 구글폰트(https://fonts.google.com/)에 접속하여 원하는 폰트를 선택

  • 우측상단의 +버튼 클릭

    ▶ STANDARD 방식

    → HTML에 CSS파일을 연결해주는 방식과 같이 태그를 사용하여 폰트를 가져온다
    <link href="https://fonts.googleapis.com/css?family=Cute+Font" rel="stylesheet">

    ▶ @IMPORT 방식

    → CSS 파일에 

    @import url('https://fonts.googleapis.com/css?family=Cute+Font');
</style>

< font-style >

  • normal : 아무 효과도 적용하지 않은 기본 글자체
  • italic : 이탤릭체가 디자인 되어있는 폰트에서 이탤릭체를 적용
  • oblique : 이탤릭체가 디자인 되어있지 않은 폰트에서 무조건 기울임꼴로 적용

< font-weight >

  • 폰트의 굵기를 지정할 때 사용
  • 속성값으로는 100단위 숫자가 사용된다 (100~900)

< text-align >

  • 텍스트의 좌 / 우 / 중앙 정렬
  • 텍스트의 가로 맞춤을 설정할 때 사용
  • 속성값으로는 left / right / center
  • 해당 요소를 기준으로 정렬

< line-height >

  • 문장사이의 간격을 조절할 때 사용
  • px처럼 단위를 사용해 나타낼 수도 있고, 단위없이 숫자만 사용 가능

< letter-spacing >

  • 글자와 글자 사이의 간격, 즉 자간을 의미한다

< text-indent >

  • 문단의 시작부에 들여쓰기를 지정한다

< Box Model >

  • 박스 모델은 내용(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 이루어져있다
  • 내용(Conetent) : 이미지나 텍스트 같이 우리가 태그 사이에 담은 내용을 실제로 담고 있는 부분
  • 패딩(Padding) : content와 border사이의 여백
  • 테두리(Border) : 내용을 감싸고 있는 테두리
  • 마진(Margin) : border 밖의 여백

< box sizing >

  • 보통 요소의 영역을 지정할 때 content를 기준으로 하지만 무조건 content를 기준으로 해야하는 것은 아니다.

< display >

  • 각 요소가 보여지는 방식을 지정하는 속성

  • 속성값으로 크게 block 과 inline이 올 수 있다

  • block과 inline의 가장 큰 차이는 각 요소가 가지는 영역이다

  • display : block

    • 각 요소들을 일종의 상자로 인식하고, 태그안의 내용에 상관없이 좌우 공간을 모두 차지한다
    • 너비를 지정하지 않아도 width:100%가 기본으로 지정된다
    • display : block을 기본값으로 가지고 있는 태그 : div, h1~h6, p, header, section, footer 등

  • display : inline

    • block과 달리 태그 안의 내용만큼만 공간을 차지한다
    • 좌우에 다른 내용이 담긴 태그가 올 수 있다.

  • display : inline-block

    • 공간을 차지하는 부분에서 inline요소와 비슷하지만, inline 요소에 적용이 되지 않았던 width, height, margin-top, margin-bottom 지정 가능

  • display : none

    • 이 속성을 지정하면 브라우저에 해당요소가 출력이 되지 않는다. 주로 자바스크립트를 이용해 요소를 사라지게 해야할 때 쓰인다

< position >

  • 속성값으로 static, relative, absolute, fixed가 있다

  • default값은 static이다

  • position : static

    • 기본값으로 특별한 위치가 지정되지 않는다
    • top, left, right, bottom 등과 같은 좌표 property로 위치를 조정할 수 없다

  • position : relative

    • static과 달리 top, left, right, bottom 등과 같은 좌표 property로 위치를 조정할 수 있다

  • position : absolute
    - relative 처럼 좌표 property로 위치를 조정할 수 있다
    - 기준은 자기 자신이 아닌 relative, absolute, fixed가 선언된 부모태그나 조상태그를 기준으로 좌표 property가 적용된다

  • position : fixed
    - 보이는 화면을 기준으로 좌표 property를 이용하여 위치를 고정시킨다

< z-index >

  • 여러 요소가 겹쳐져 나타날 때 어떤 요소를 맨 위로 보낼것인지 결정하는 속성이다
  • 값이 클 수록 전면에 위치한다

< flex-box >

  • flex container

    • flex box를 사용하기 위해서는 정렬하고자 하는 부모 요소에 display : flex;를 추가해야만 쓸 수 있다

  • flex item

    • 부모 요소에 display : flex; 가 설정이되면 자식 요소들은 자동적으로 flex item이 된다.

  • flex-box의 핵심 : 정렬

  • 가로방향 / 세로방향

  • 요소들을 띄엄띄엄 일정한 간격으로 배치하기도 하고, 요소들로 화면을 꽉 채워 배치하기도 한다

  • 부모 요소(flex-container)에서 사용 가능한 속성

    • flex-direction : flex container 안의 flex item들의 기본 방향을 정해준다. 기본값은 row 이며 왼쪽에서 오른쪽으로 정렬한다

  • flex-wrap : flex item이 flex container를 벗어났을 때 줄바꿈 여부를 결정하는 속성이다 기본값은 nowrap이다

< justify-content >

  • 정렬 방식을 결정하는 속성이다
  • flex-direction을 기준으로 정렬이 되므로 flex-direction에 어떤 값이 적용되고 있는지 파악하는게 중요하다
  • flex-direction을 기준으로 정렬이 되므로 left,right 같은 표현보다 start, end를 사용한다

< align-items >

  • justify-content는 flex-direction으로 정해진 방향을 기준으로 정렬이 된다면 , align-items는 flex-direction에서 정해진 방향의 수직방향으로 정렬한다

< align-content >

  • flex item이 여러줄일 경우 flex direction방향을 기준으로 수직 정렬 방법을 정한다

< flex-grow >

  • flex item과 flex container간의 크기 비율을 결정한다
  • 정수값을 가지며 기본값으로 0을 가진다
  • 0일 경우 flex container가 커져도 flex item의 크기는 커지지 않고, 1 이상의 값을 가질 경우 flex item의 원래 크기와 상관 없이 flex container를 채우기 위해 해당 값을 적용한 flex item이 커진다
  • 다른 두 개의 아이템이 있고 각 아이템별로 값을 다르게 주면 item의 크기는 달라진다

< flex-shrink >

  • flex-grow와 반대로 flex item의 축소와 관련된 속성이다
  • 정수값을 가지며 기본값으로 1을 가진다
  • 0일경우 flex container 크기에 flex item이 영향을 받지 않는다
  • 1 이상일 경우 flex container의 크기가 작아지면 flex item도 그 크기에 맞추어 줄어든다
  • flex-shrink에 큰 값을 넣은 flex item이 더 많이 줄어든다

< flex-basis >

  • flex item의 기본 크기를 지정하는 속성이다
  • 기본값으로 auto를 가지며, px, % 등 다양한 속성을 넣을 수 있다

< 상속 >

  • 부모나 조상요소에 적용된 속성들을 자식 혹은 후손 요소가 물려받는 것
  • 모든 CSS요소에 상속이 적용되는 것은 아니다

< 우선순위 >

  • Cascading은 CSS에서 적용되는 우선순위를 의미한다

  • 중요도

  1. 태그 내의
  2. 태그 내의
  3. 태그로 연결된 CSS
  4. 태그로 연결된 CSS 내의 @import문
  5. 브라우저 디폴트 스타일시트
  • 명시도
  1. !important
  2. inline style
  3. id selector
  4. class, attribute, pseudo class selector
  5. type selector
  6. universal selector
  7. inherit
  • 선언순서
    • 중요도와 명시도가 같을 경우에는 가장 나중에 선언된 스타일을 우선으로 적용한다
profile
Seunghwa's Devlog
에러와 부딪히고 새로운 것을 배우며 성장해가는 과정을 기록합니다!
이전 포스트

2주차 강의내용

다음 포스트

Http protocol

0개의 댓글