3주차 강의내용

Seunghwa's Devlog·2021년 2월 24일
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
에러와 부딪히고 새로운 것을 배우며 성장해가는 과정을 기록합니다!

0개의 댓글