본문 바로가기

CSS17

CSS 쉽게 배우기 | 포지션(Position) CSS로 요소의 포지션을 내가 원하는 위치로 변경하기 안녕하세요 이번 편에서는 요소의 포지션에 대해서 알아볼게요 요소의 포지션이란 요소의 위치를 변경할 때 사용하는 속성입니다 이미 마진과 패딩으로 할수있지않나? 라고 할 수 있지만 마진/패딩과는 다른 개념입니다 마진/패딩은 요소의 빈 공간의 크기를 바꿔서 요소의 위치를 변경하고 포지션은 요소 자체의 위치를 변경합니다 이해가 안 가시죠? 저도 처음에 이거 배울 때 엄청 헤맸었죠 솔직히 지금도 가끔 헷갈려요 😅 그럼 포지션을 알아볼까요? CSS Position 요소의 포지션은 6가지의 방법으로 변경할 수 있습니다 position: static; 정지(기본) position: relative; 상대적 position: absolute; 절대적 position:.. 2021. 1. 25.
CSS 쉽게 배우기 | 배경 만들기 CSS로 배경으로 이미지 사용하기 안녕하세요 이번 편에서는 배경을 꾸며볼게요 배경으로 원하는 색을 사용할 수도 있지만 이미지를 배경으로 사요 하면 좀 더 보기 좋겠죠? 그럼 먼저 CSS에서 배경은 어떻게 선택하고 조절할 수 있는지 알아볼게요 배경 선택하기 CSS에서 배경은 여러 부위로 나뉘어 있습니다 background-color 배경 색 background-image 배경 이미지 background-repeat 배경 반복 background-position 배경 위치 background-size 배경 사이즈 background-attachment 배경 부착 (고정, 스크롤) background 배경 단축 속성 뭐가 많죠? 하나하나 차근차근 알아볼게요 이미지 배경 만들기 background-color 배.. 2021. 1. 24.
CSS 쉽게 배우기 | 색상 CSS에서 배경 색, 글 색, 테두리 색, 그라데이션 그리고 그림자까지 모두 마스터하기 안녕하세요 이번편부터는 본격적으로 CSS로 할 수 있는 것들을 볼 거예요 그중 제일 먼저 색을 볼게요 아무리 예쁜 디자인이라도 색이 없으면 소용없잖아요 그럼 요소의 어디에 색을 입힐 수 있는지 볼게요 CSS 속성 적용 범위 color 텍스트 색 background / background-color 배경 색 border-color 테두리 색 box-shadow 박스 그림자 text-shadow 텍스트 그림자 색 지정하기 CSS에서 색을 지정하는 방법은 3가지가 있습니다 색 이름을 사용하기 색상코드(hex code) 사용하기 RGB 값 사용하기 See the Pen CSS Define Color by Hojung (@ho.. 2021. 1. 17.
CSS 쉽게 배우기 | 사이즈 단위 CSS에서 사용할 수 있는 사이즈 단위인 px, %, rem, em, vh, vw 차이점과 사용법 알아보기 안녕하세요 이번편에서는 CSS 하면 빼놓을 수 없는 사이즈 단위들을 알아볼게요 CSS에서 요소의 크기를 조절할때 사용할 수 있는 단위들로 px, %, rem, em, vh, 그리고 vw 가 있습니다 그럼 하나하나 살펴볼게요 CSS px px는 픽셀을 뜻합니다 픽셀은 화면에 사람의 눈으로 편하게 볼수있는 제일 작은 점인데요 1픽셀은 96DPI에서 보이는 1개의 점의 크기입니다 CSS에서 픽셀은 다른 단위들의 기준점이 되기도 합니다 픽셀로 맞춰진 요소의 크기는 어떤 화면의 크기에서도 그 크기가 변하지 않습니다 그래서 반응형 디자인에는 적합하지 않은 단위입니다 반응형 디자인은 페이지의 레이아웃이 화면의 .. 2021. 1. 17.
CSS 쉽게 배우기 | 패딩(padding)/마진(margin)/박스 모델(box model) CSS 패딩과 마진 차이점과 사용법 그리고 박스 모델 알아보기 안녕하세요 CSS 단위들을 보기전에 먼저 패딩과 마진, 그리고 박스 모델을 먼저 알아볼게요 HTML의 모든 요소에는 패딩과 마진을 조절할수 있습니다 패딩/마진을 사용해서 요소와 요소 사이의 간격을 조절하는거죠 박스 모델은 요소의 스타일이 어디에 적용되는지 볼수있는 지도 비슷한 도구 입니다 그럼 패딩/마진을 살펴볼게요 CSS 패딩(padding) 패딩은 요소의 테두리 안쪽 가장자리입니다 패딩의 사이즈를 조절해서 요소의 내용과 테두리사이의 간격을 벌리거나 좁힐수 있습니다 패딩은 색을 줄수 없으며 테두리가 없는상태에서는 구별할수 없습니다 패딩을 확인하려면 브라우저의 개발자 도구에서 박스 모델로 확인할수 있습니다 패딩은 위, 아래, 오른쪽, 왼쪽을 .. 2021. 1. 10.
CSS 쉽게 배우기 | CSS 선택자(Selector) CSS로 HTML요소 선택하는 방법 안녕하세요 이번 편에서는 CSS 선택자 (selector)를 알아볼게요 CSS 선택자는 HTML 요소를 선택하는 방법입니다 HTML 요소를 선택하는 방법인 요소 이름으로 선택하기 요소의 클래스/아이디로 선택하기 요소와 요소의 관계로 선택하기 들을 알아볼게요 CSS 선택자가 중요한 이유는, 선택자를 사용해서 내가 원하는 요소만 스타일링할 수 있기 때문입니다 선택자를 알아보기 전에 CSS를 작성하는 것 먼저 알아볼게요 CSS 작성하는 방법 CSS를 작성하는 방법은 아주 간단합니다 먼저 내가 스타일링하고 싶은 요소를 쓰고 대괄호{ }를 열어주면 됩니다 예를 들어서 요소를 스타일 하고 싶으면 p {} 이렇게 p를 쓰고 대괄호를 열어줍니다 이렇게 하면 대괄호 안에 지정한 스타일.. 2021. 1. 4.
CSS 쉽게 배우기 | 소개 CSS 소개, 뜻, 그리고 사용 방법 알아보기 안녕하세요 오늘부터 CSS (Cascading Style Sheet)를 알아볼게요 그럼 먼저 CSS가 뭘까요? CSS는 Cascading Style Sheet의 약자로 HTML를 예쁘게 꾸밀수있게 도와주는 웹 스타일링 언어 입니다 HTML이 민낯이라면 CSS는 민낯에 화장을 하는거라고 생각하면 됩니다 좀더 자세하게 풀어보자면 C - Cascading(카스케이딩) 카스케이딩의 사전적 의미는 '아래로 흘러가다' 입니다 S - Style(스타일) 디자인측면에서의 스타일을 말합니다 S - Sheet(시트) 문서를 말합니다 이렇게 '아래로 흘러가는 디자인 스타일 문서' 라고 풀수 있습니다? 뭔 개소리인가 싶죠? CSS의 특성상 제일 마지막에 작성된 스타일이 HTML요.. 2020. 12. 29.
CSS-글꼴 | 티스토리 스킨 글꼴 바꾸기 내 블로그 스킨도 딱 좋고, 내용들도 알차고, 다 좋은데 가끔 뭔가 변화를 주고 싶을 때가 있나요? 너무 많은 변화는 뭔가 망칠까봐 무섭고, 부담도 되고... 글꼴이라도 바뀌면 좀 새로워 보일라나?? 그래서 오늘은 실패 없이 글꼴 바꾸는 방법을 알아볼게요. 1. 구글 폰트에서 언어를 한국어로 설정하세요 2. 마음에 드는 글꼴을 찾아 클릭해서 글꼴 페이지로 가세요 3. "스타일 선택"을 클릭하세요 4. 오른쪽 사이드바에서 "삽입"탭을 선택하고 "@import"방식을 선택하세요 5. @import와 font-family를 메모장에 잠깐 복사해두세요 **은 필요 없습니다** 6. 꾸미기 에서 "스킨 편집"을 열어주세요 7. 오른쪽 사이드바에서 "html 편집"을 클릭해주세요 8. 위에서 CSS를 클릭하세요 9.. 2020. 9. 7.
반응형