HTML+CSS+JAVASCRIPT 2주차

고태경·2023년 7월 14일
HTML/CSS/JavaScript

선택자 다루기

전체 선택자 *

    <style>
        *{ /* 전체 선택자 */
            color:red;
        }
    </style>

태그 선택자

<style> 
        h1 {
            /* 내부 스타일 시트 */
            color : blue
        }
    </style>

아이디 선택자 #, id

태그에 아이디를 지정한 후, 그 아이디를 선택
고유한 값임

<head>
    <style>
        #name {
            color:pink;
        }
    </style>
</head>
<body>
    <p id="name">이름은 고태경</p>
</body>

클래스 선택자 ., class 多

아이디와 다르게 중복 사용 가능

<head>
    <style>
        .age {
            color:pink;
        }
    </style>
</head>
<body>
    <p id="age">나이는 만 19살</p>
</body>

기본 속성 선택자

태그이름[속성이름]
or id 선택자[속성이름]
or class 선택자[속성이름] 조합으로 가능

<head>
    <style>
        a[href] {
            color:pink;
        }
    </style>
</head>
<body>
    <a href="#">기본 a 태그</a>
    <a href="#" target="_blank">새창으로 가는 a 태그</a>
</body>

문자열 속성 선택자

있다는 것만 알고 넘어가기~

1분 퀴즈
기본 선택자의 종류와 설명이 잘못 짝지어진 것
5번, 속성 선택자는 html 속성으로 요소를 선택한다. (css 속성 X)

조합 선택자

그룹 선택자 ,

, 기호로 구분

<style>
     h2, h3 {
         color: brown;
     }
</style>

자식 선택자 >

부모 선택자 > 자식 선택자
부모 요소 하위에 있는 (직계) 자식 요소 스타일을 적용

<head>
/* 자식 선택자 */
        .fruit > p {
            color: rgb(100, 79, 39);
        }
</head>
<body>
	<div class="fruit">
        <p>사과</p>
    </div>
</body>

하위 선택자

하위 선택자에 적용

인접 형제 선택자 +

선택자 요소 바로 다음에 있는 형제 관계 요소 선택자를 지정
(처음꺼는 포함 안됨)

일반 형제 선택자 ~

선택자 요소 뒤에 있는 형제 관계 요소 선택자를 지정
(처음꺼는 포함 안됨)

1분 퀴즈
선택자와 구분 기호가 잘못 연결된 것?
3번, +가 아니라 공백임

가상 요소 선택자 ::

::before 콘텐츠 앞 공간 선택

::after 콘텐츠 뒷 공간 선택

	<style>
		p::before {
        	content: "[내용]"
        }
	</style>
</head>
<body>
	<p>안녕</p>
</body>
  • css 속성과 함께 사용 가능

가상 클래스 선택자 사용하기

링크 가상 클래스 선택자

방문 기록이 없는 링크면 선택

:visited

방문한 적 있는 링크면 선택

동적 가상 클래스 선택자

:hover

태그 위에 올리면 변함

:active

누르고 있으면 활성화

입력 요소 가상 클래스 선택자

:focus

입력 요소에 커서가 활성화되면 선택자로 지정

: checked

체크박스가 표시되어 있으면 선택자로 지정
등등...

구조적 가상 클래스 선택자

p.160~164 참고

1분 퀴즈
가상 클래스 선택자가 아닌 것은?
2번 :first-letter

다양한 선택자 조합

p.166
선택자 조합

[태그이름].[class 속성값] { }
[태그이름]#[id 속성값]

셀프 체크 169p
조건에 맞게 선택자 작성하기
1. p 태그를 모두 선택
-> p {}
2. id 속성값이 title인 태그를 선택
-> #title {}
3. class 속성값이 box이면서 id 속상값이 title인 태그 선택
-> .class, #id {}
4. section 태그 하위에 있는 모든 div 태그
-> section > div {}
5. label 태그와 인접한 형제 관계인 input 태그를 선택
-> label + input {}
6. a ~ span {}

css 필수 속성

  • 기본 스타일 시트
  • css의 개별성, 우선순위
    + 점수가 같으면 나중에 적용된 코드가 적용됨
    + *(0) < 태그(1) < 클래스(10) < 아이디(100) < 인라인 스타일(1000)< !important(10000)
    <style>
 p{
 	color: red !important;
 }
</style>
  • 상속
    부모 속성을 자식이 물려 받는 것, 전부 상속되는 것은 아님!
  • 단위 (절대(px), 상대(em 등))
    em : 배율, rem : 최상위 요소(html)에서 물려받음, % : 상위 요소
  • 색상
    • 키워드 표기법 : 색상 이름을 영어로 적는 것
    • rgb 색상 표기법
    • hex 표기법 : #000000 이런 식

텍스트 속성으로 텍스트 꾸미기

font-family (글꼴 지정)

font-size (텍스트 크기)

font-weight (텍스트 굵기)

100~900, 키워드

font-style (글꼴 스타일)

font-variant (크기가 작은 대문자)

color (텍스트 색상)

text-align (텍스트 정렬)

text-decoration (텍스트 꾸미기)

none 속성을 통해 a 태그의 밑줄 제거 가능

letter-spacing (자간 조절)

line-height (텍스트 높이(행간))

텍스트 속성이 아닌 것 p193
5번 font-weight

박스 모델을 구성하는 속성 다루기

margin, border, padding, content

  • margin 겹침 현상

박스 모델 & display

블록

항상 가로 한 줄 다 차지
hn,p, div

인라인

콘텐츠 크기만큼 차지, 너비 높이 설정 불가
a, span, strong

인라인 블록 성격

너비는 콘텐츠 크기만큼 차지, 나머지는 블록 성격
너비 높이 설정 가능

  • 인라인 성격은 padding, margin 속성의 양쪽만 적용

display

박스 모델의 성격을 바꿈

p.212
너비 : 170, 높이 : 135

배경 속성으로 요소의 배경 설정

background-color

background-image

background-repeat

background-size

background-position

background-attachment

이미지 크기를 지정하는 속성
3번 width, height

위치 속성으로 html 요소 배치

static

rerlation

absolute

fixed

스크롤해도 보이는 위치가 고정됨

sticky

정식 지원 아님

z-index

겹치는 것

float 속성을 초기화 하는 clear 속성값
4번 right

전환 효과 속성 적용

transition-property 속성

전환 효과를 적용할 대상 속성 지정

transition-duration 속성

전환 효과의 지속 시간을 설정하는 데 사용
속성값으로는 초 단위 값을 사용

transition-delay 속성

전환 효과의 발생을 지연할 수 있음

transition-timing-function 속성

전환 효과의 진행 속도를 지정

249p
틀린 설명은?
2번, transtion-timing-funtion 이란건 없음

애니메이션 속성으로 전환 효과 제어

animation-name 속성

특정 요소에서 적용할 키 프레임명을 지정

animation-duration 속성

애니메이션을 지속할 시간을 설정

animation-delay 속성

애니메이션 실행을 지연

animation-fill-mode 속성

애니메이션이 종료된 시점의 상태를 유지

animation-iteration-count 속성

실행 횟수를 조절

animation-play-state 속성

애니메이션의 재생 상태를 지정

258p
틀린 것은?
4번

변형 효과 적용

transform 속성

translate, scale, skew, rotate

웹 폰트와 아이콘 폰트 사용하기

p265~270

플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기

구성 요소

주축, 교차축, 플렉스 컨테이너, 플렉스 아이템

기본 속성

display, flex-direction, flex-wrap 속성

아이템이 한 번에 수평과 수직 방향으로 중앙 정렬하도록 하는 레이아웃 속성
2번 display:flex, justify-content:center, align-content:center

그리드 레이아웃으로 2차원 레이아웃 설계하기

구성 요소

행, 열, 그리드 셀, 그리드 갭, 그리드 아이템, 그리드 라인, 그리드 넘버, 그리드 컨테이너

기본 속성

display, grid-template-rows등등

그리드 레이아웃에서 지원하지 않는 속성
5번 grid-glow -> grid-row임

반응형 웹을 위한 미디어 쿼리 사용하기

미디어 쿼리란

사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을
적용하게 하는 기술

뷰포트

웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기

미디어쿼리를 고르시오
1번

자바스크립트

자바스크립트 연결

내부 스크립트

<script>
	document.write() ;
</script>

외부 스크립트

.js 파일 생성

<script src="week2_script.js"></script>
profile
고태경
컴퓨터정보과
이전 포스트

HTML+CSS+JAVASCRIPT 1주차

다음 포스트

HTML+CSS+JAVASCRIPT 3주차

0개의 댓글