본문 바로가기

HTML5&CSS3

 (18)
[웹페이지 기초 6] - Grid Layout Grid Layout CSS에서 제공되는 레이아웃으로 행과 열이 기반인 레이아웃 시스템이다. 지금까지 웹페이지에서 위치를 지정하기 위해 float나 position을 사용하였지만, Grid Layout을 사용하면 레이아웃을 더욱 쉽게 지정할 수 있다. 단, 최신 브라우저에서만 지원이 된다고 한다. Grid Container : 그리드 전체 영역 Grid Column : 그리드 열 Grid Rows : 그리드 행 Grid Cell : 그리드 한 칸 Grid Line : 그리드 셀을 구분해주는 선 Grid Gap : 그리드 셀 사이의 간격 Grid Area : 그리드 셀의 집합 간단하게 Grid Layout을 이용한 예제를 만들어봤는데, Grid속성은 태그 안에 선언해주면 된다. display:grid ->..
[웹페이지 기초 5] - 반응형 웹 CSS 반응형 웹이란? 예전에는 주로 pc환경에서만 웹사이트에 접속했지만, 요즘 시대에서는 스마트폰, 태블릿 등 다양한 디바이스를 통해 웹사이트에 접속을 한다. 하나의 고정된 크기로 웹페이지를 제작하면 어느 디바이스에서는 작게 보일 수도, 어느 디바이스에서는 크게 보일 수도 있는데, 화면 크기가 각각 다른 디바이스 종류에 따라 화면의 크기가 자동적으로 변하여 어디서든 최적화된 화면으로 볼 수 있게 만든 것을 반응형 웹 디자인이라고 한다. 반응형 웹으로 웹사이트를 만들면 PC 전용, 태블릿 전용, 모바일 전용과 같이 각각 별개로 웹사이트를 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 전자기기 환경에 맞춰 대응할 수 있다. 이렇게 반응형 웹으로 제작을 하면, 하나의 URL을 가지기 때문에 접속도 효율적으로..
[웹페이지 기초 4] - CSS 규칙 CSS 파일 분리 지금까지 공부를 하며 만든 간단한 웹사이트는 html 문서 안에 css 속성도 같이 선언해줬다. 코드가 많이 길지 않았기 때문에 수정하는 데에도 어려움은 없었지만, 구글이나 네이버 정도의 웹사이트를 제작하면 코드가 매우 길어져서 수정하기 매우 어려울 것이다. 이런 문제를 방지하기 위해 css를 html 문서로부터 분리시켜준다. 위에 보이는 그림처럼 html 문서에서 css를 분리할 수 있는데, 하나의 css파일로 분리해도 되고 여러 개의 css파일로 분리해도 된다. 웹사이트를 제작할 때 구현하려는 기능이 많을수록 코드가 길어지므로, 원활한 제작을 위해 css파일을 기능별로 분리하여 여러 개의 파일로 저장하는 게 좋을 것이다. : 저장되어 있는 css파일을 호출하여 적용시켜준다. 이렇게 ..
[웹페이지 기초 3] - CSS3 애니메이션 이전 게시물에서는 CSS3 변형 기초에 대해 다뤄보았고, 이번에는 애니메이션에 대해 세부적으로 공부를 해보겠다. CSS3 애니메이션 CSS 스타일을 다른 스타일로 전환할 때 부드럽게 진행시켜주는 속성이다. 키프레임을 이용한 애니메이션 @keyframes A { from { B } to { C } } -> A라는 이름을 가진 키프레임 요소에 대해, B의 속성에서 C의 속성으로 애니메이션이 진행된다. transform:rotate -> 애니메이션이 진행되면서 설정한 수치만큼 해당 요소가 회전을 한다. animation-iteration-count:infinite : 기본적으로 애니메이션은 웹페이지를 열었을 때 한번 진행되지만, 이 속성을 사용하면 애니메이션이 계속해서 반복된다. animation-direct..
[웹페이지 기초 2] - CSS3 변형 변형이란 웹페이지에 출력되는 요소의 크기나 모양이 바뀌는 것을 의미한다. 보편적으로 JavaScript나 jQuery같은 라이브러리를 이용해서 CSS3변형 작업을 한다. CSS3변형 속성을 직접적으로 적용하는 방식은 많이 쓰이지 않지만, 알아두면 웹페이지를 만들 때 차별성을 둘 수 있어 좋을 것 같다. id는 wrap으로, class는 rec로 선언하여 예시를 만들어봤다. transition-duration:2s; -> 변형 속성 설정 시, 변형이 진행되는 시간으로 2s로 설정하였으면 변형이 2초 뒤 완료된다. 1) hover 속성 : 기존에 생성된 요소위에 마우스를 올리면 2초동안 hover에서 설정한 속성 값으로 변형이 진행된다. 2) active 속성 : 기존에 생성된 요소를 마우스를 누르고 있으면..
[웹페이지 기초 1] - 홈페이지 기본 레이아웃 만들기 인터넷을 사용하면서 다양한 웹사이트를 접하게 되는데, 전체적으로 비슷한 레이아웃 구조를 가지고 있다. 대중적으로 많이 쓰이는 웹사이트인 네이버의 레이아웃 구조를 살펴보면 이와 같이 분류할 수 있다. 다른 웹사이트도 대부분 위와 같은 구조를 가지며, 본인이 웹페이지를 설계할 때도 이런 구조로 큰 틀을 잡고 만드는 것이 좋다. 이런 구조들과 비슷한 형태로 간단한 웹페이지를 만들어봤다. 내가 만든 게시판의 레이아웃 구조를 큰 틀로 나누면 이와 같다. ① header ② nav ③ content ④ section ⑤ aside ⑥ article ⑦ footer ① header 사이트 이름, 사이트 로고, 검색창 등을 정의한다. ② nav 사이트의 다른 페이지로 이동할 수 있는 메뉴 항목, 카테고리를 정의한다. ..
[CSS3 기초 7] - CSS 속성 4 (float속성 , gradient속성) float 속성 position속성과 비슷하게 요소의 위치를 설정하기 위한 속성이다. float:left -> 요소들을 왼쪽 기준으로 배치한다. float:right -> 요소들을 오른쪽 기준으로 배치한다. float 속성을 활용해서 이미지를 사용할 때도 적용할 수 있다. 기존이라면 이미지 밑으로 p태그가 표시되지만, img속성에 float:left 설정을 하여 p태그가 이미지 옆으로 표시된다. gradient 속성 2가지 이상의 색을 나타내고 싶을 때 사용되는 속성이다. 색상 설정은 https://www.colorzilla.com/gradient-editor/ 에 들어가서 원하는 색상으로 설정하면 CSS코드도 자동적으로 작성이 되는데 해당 코드를 가져와서 사용하면 된다. 이렇게 코드를 가져와서 복사하면..
[CSS3 기초 6] - CSS 속성 3 (font-family , font-size, font-style, font-weight, line-height, text-align, text-decoration, position) font-family, font-size font-family 속성을 통해 폰트(글씨체)를 설정할 수 있고, font-size 속성으로 글씨 크기를 설정할 수 있다. font-family:'A', 'B', C; -> 폰트를 A로 설정한다. 만약 A폰트가 존재하지 않으면 B폰트, B폰트가 없으면 C, 모든 폰트가 없거나 폰트 설정이 따로 없으면 기본적으로 브라우저에서 지원하는 글씨체가 사용된다. font-size : 글씨 크기를 설정하는 속성으로 px, em, % 단위로 설정할 수 있다. ( 100% = 1.0em = 16px ) ※ 한글과 숫자,영어 글씨체가 다르게 표시되는 폰트를 볼 수 있는데, 이것은 해당 폰트가 한글을 지원하지 않아서 기본 글씨체로 나타나는 경우이다. font-style, font-..
[CSS3 기초 5] - CSS 속성 2 (margin, padding, box-sizing, background-image) margin 및 padding 속성 margin은 설정한 값만큼 태그 바깥 부분에 투명한 공백이 생긴다. padding은 설정한 값만큼 태그 바깥부분에 공간이 확장된다. margin과 padding 값을 지정할때 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 설정할 수 있다. ex) margin:10px 9px 8px 7px -> 위쪽으로 10px, 오른쪽으로 9px, 아래쪽으로 8px, 왼쪽으로 7px만큼 margin float 속성 태그의 배치 위치를 설정할 수 있는 속성이다. float:left -> 설정한 태그가 생성될때 왼쪽으로 붙어서 생성된다. ※ 해당 태그에만 이 설정값을 적용하려면 상단 태그에 overflow:hidden; 속성을 입력해줘야 한다. 아래의 내용으로 설명하자면 #content div에..
[CSS3 기초 4] - CSS 속성 1 ( CSS3 단위, url(), display속성, visibility 속성, opacity 속성) CSS3 단위 CSS3에서 자주 사용되는 단위로는 px, %, em 등이 있다. px : pixel로 모니터에 따라 상대적인 크기를 가진다. % : 글꼴의 크기에 대하여 상대적인 값을 가진다. em : 해당 글꼴의 크기를 나타낸다. ※ 대부분의 브라우저는 폰트 사이즈의 기본 값이 16px, 1em, 100%이다. 아래의 내용은 em의 값에 따라 다르게 출력되는 예시이다. (복습할 겸 공부했던 선택자들도 사용하여 작성해봤다.) url() background-img 속성의 설정값으로 많이 사용되며, 해당 태그의 배경 이미지를 나타낸다. width:80% -> 태그 전체 면적에서 가로 80%만 사용한다. (왼쪽, 오른쪽 10%씩 사용 안 함)heignt:100% -> 태그 전체 면적에서 세로 100% 모두 사..

티스토리툴바