HTML/CSS(5일차)

이상우·2021년 8월 9일

2주차때는 웹 프로그래밍 기초 HTML, CSS, Javascript 프론트엔드쪽을 배우고, 크롤링에 대해서 배운다. 사전에 HTML, CSS, Javascirpt를 간단하게 공부한 경험이 있어서 오늘 강의는 특별히 어려운 것이 없었다.

HTML(Hyper Text Markup Language)

웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어

HTML태그 구성요소

<열린태그 속성 = "속성값">컨텐츠</닫힌태그>

1. 태그명 : HTML이 갖고 있는 고유의 기능 <열린태그></닫힌태그>형태로 입력
2. 컨텐츠 : 열린 태그와 갇힌 태그 사이에 있는 내용물
3. 속성 : HTML태그가 갖고 있는 추가 정보
4. 속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것

Block요소와 Inline요소

Block 요소

y축 정력 형태로 출력(줄바꿈 형상 나타남)
공간을 만들 수 있고, 상하 배치 작업 가능
가 대표적

Inline 요소

x축 정렬 형태로 출력(한 줄에 출력)
공간을 만들 수 없고, 상하 배치 작업 불가능
가 대표적

CSS(Cascading Style Sheet)

정보(HTML)와 디자인(CSS)의 분리
문서의 레이아웃과 스타일 정의
HTML로 작성된 정보를 꾸며주는 언어

CSS구성요소

선택자 {속성 : 속성값;}

1. 선택자: 디자인을 적용할 HTML영역

Type Selector : 특정 태그에 스타일을 적용
Class Selector : 클래스 이름으로 특정 위치에 스타일을 적용
ID Selector : ID를 이용하여 스타일을 적용
2. 속성: 어떤 디자인을 적용할지 정의
3. 속성값: 어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;)필수 입력

캐스케이딩

1. 순서에 의한 캐스케이딩: 나중에 적용한 속성값의 우선순위가 높음
2. 디테일에 의한 캐스케이딩: 더 구체적으로 작성된 선택자의 우선순위가 높음
3. 선택자에 의한 캐스케이딩: style > id > class > type 순으로 우선순위가 높음(중요!!)

Transform/Transition/Animation

Transform

요소의 이동, 회전, 확대축소, 비틀기 효과를 제공하는 함수
트랜지션과 애니메이션과 조합하여 사용하면 편리

사용법

/*
    트랜스폼 함수들을 쉼표 없이 나열
*/
transform: 함수1 함수2 함수3
/*
    * transform-origin 속성은 요소의 기준점을 설정
    * 기본값은 요소의 정 중앙인 50%, 50%이다.
*/
transform-origin: 50% 50% 0 (x, y, z)

다양한 트랜스폼 요소는 아래 링크에 참고하면 된다.
https://ahribori.com/article/5a0c49926c9eef13d882e3ea

Transition

요소의 변화를 일정 기간(duration)동안 일어나게 함
자동으로 발동되지 않음 (hover나 onclick 같은 이벤트 트리거에 의해 동작함)

사용법

<div class="sqare"></div>
.sqare {
width: 100px;
height: 100px;
background-color: red;

  transition-property: width, background-color; // 트랜지션의 대상이 되는 프로퍼티를 지정 (기본값 all)
   transition-duration: 1.2s, 3s // 변화가 일어나는 기간. 초단위. 프로퍼티와 각각 대응 (기본값 0s)
   transition-timing-function: ease; // 트랜지션 변화율 함수 지정 (기본값 ease)
   transition-delay: 1s; // 트리거 이벤트 발생 후 몇 초 후에 트랜지션이 시작될 것인지 지정 (기본값 0s)
   transition : (shorthand)
}
.sqare:hover {
   width: 300px;
   background-color: blue;
}

주의점

layout에 영향을 주는 요소의 크기나 위치가 변화하면 영향을 받는 모든 요소들의 크기나 위치를 재계산 하게 되는데 영향을 받는 요소들이 많을수록 많은 부하가 감
가급적이면 가능한 낮은 계층의 요소에 트랜지션을 효과를 주기 위한 노력을 해야함

layout에 영향을 주는 속성들

width height padding margin border
display position float overflow
top left right bottom
font-size font-family font-weight
text-align vertical-align line-height
clear white-space

Animation

트랜지션보다 할 수 있는 것이 많음
트랜지션은 시작하기 위해 이벤트가 필요하지만 애니메이션은 시작, 정지, 반복까지 제어할 수 있음
하나 또는 복수의 @keyframes으로 이루어짐

@keyframes
@keyframes 키워드는 애니메이션을 정의하는 키워드라고 할 수 있음

@keyframes myAnimation {
}

myAnimation 이라는 이름을 가진 @keyframes을 선언한 모습

@keyframes myAnimation {
    from {
        background-color: red;
        width: 100px;
        height: 100px;
    }
    to {
        background-color: blue;
        width: 200px;
        heigh: 100px;
    }
}

from{}과 to{}로 애니메이션이 시작하는 시점의 상태와 끝나는 시점의 상태를 정의할 수 있다.

@keyframes myAnimation {
    0% {
        background-color: red;
        width: 100px;
        height: 100px;
    }
    30% {
        background-color: yellow;
    }
    100% {
        background-color: blue;
        width: 200px;
        heigh: 200px;
    }
}

from{}은 사실 0%이고 to{}는 100%이다. %단위로 애니메이션의 각 시점을 세밀하게 기술할 수 있다.

미디어 쿼리(Media Query)

미디어 쿼리란? PC뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해

미디어쿼리 media

min-width와 max-width로 브라우저 가로폭 설정

미디어쿼리 에시

.media {
	width: 500px;
    height: 500px;
    background-color: red;
  }
  @media(min-width: 320px) and (max-width: 800px) {
  	width: 300px;
    height: 300px;
    background-color: yellow;
  }

브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css속성으로 대체하겠다는 의미
viewport 예시

<meta name="viewport" content="width=device-width, initial-scale=1.0">

미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있다.

느낀점

간단한 웹페이지 만들 수 있는 자질을 배웠는데, 추후 프로젝트 때 웹 페이지를 만들때 도움이 될 것이다.
동적인 홈페이지를 만들려면 더 공부가 필요할 것이다.

참고 사이트

https://ahribori.com/article/5a0c49926c9eef13d882e3ea - [CSS] 트랜지션(Transition)과 애니메이션(Animation)
https://velog.io/@yunsungyang-omc/CSS-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%EB%AF%B8%EB%94%94%EC%96%B4-%EC%BF%BC%EB%A6%ACmedia-query - CSS-반응형 웹 미디어쿼리

이상우

구상한것을 구현할 수 있는 개발자가 되고 싶습니다.

이전 포스트

리눅스와 Git(4일차)

다음 포스트