본문 바로가기

분류 전체보기53

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.
HTML 쉽게 배우기 | 디브 <div> 사용법 HTML에서 는 뭐고 어떻게 사용하는가? 안녕하세요 오늘은 HTML 시리즈의 마지막으로 에 대해서 알아볼게요 HTML문서에 따르면 '는 여러 요소들을 하나의 섹션으로 그룹하는 컨테이너' 라고 소개합니다 쉽게 말해서 그냥 빈 박스에요 자체에는 스타일이나, 넓이, 높이, 등 아무것도 없습니다 그럼 를 왜 쓰냐? 정리와 컨트롤 입니다 를 사용하면 여러 요소들을 그룹지을수 있고, HTML 코드를 좀더 깔끔하게 정리할수 있습니다 이렇게 정리된 요소들은 주로 CSS를 사용해서 예쁘게 꾸미는데, CSS는 선택자(selector)를 사용해서 스타일할 요소를 고를수 있습니다 요소들이 로 정리되 있으면 CSS 선택자를 사용해서 콕집어 스타일링하기 쉬워집니다 아직 잘 이해가 안가시나요? 비슷한 예로 누구나 한번쯤은 해본 서.. 2020. 12. 28.
HTML 쉽게 배우기 | 표 <table> 만들기 2 HTML 표()의 열/행에 제목 넣기, 그리고 표()의 구조 알아보기 안녕하세요, 오늘은 저번에 알아본 의 나머지 부분에 대해서 알아볼게요 우리가 아는 표에는 제목이 있어요 예를 들어서, 시간표에 각 행의 제목은 요일, 각 열의 제목은 수업시간 이렇게 각 행과 열에 제목이 있어서 우리가 표를 봤을 때 이게 어떤 내용의 표인지 쉽게 알아볼 수 있죠 저번 편에서 시간표를 만들 때 제목을 안 넣고 만들었는데 오늘, 저번편에서 만든 시간표에 제목을 넣어 볼게요 표의 행/열에 제목 넣기 표에서 제목은 를 사용해서 넣을 수 있습니다 와 마찬가지로 는 안에서 사용합니다 저번에만 든 시간표의 첫 번째 줄에 를 사용했었는데 그 를 로 바꿔주면 이렇게 글씨가 굵어지는걸 볼 수 있습니다 이렇게 글씨가 굵어 짐으로써 제목을 .. 2020. 12. 27.
HTML 쉽게 배우기 | 표 <table> 만들기 안녕하세요 이번 편 에서는 HTML에서 표 만드는 방법을 알아볼게요 표는 정보를 열과 행으로 나눠서 전달할 때 많이 사용되는 요소입니다 이렇게 설명하면 뭔가 생소하고 처음 들어보는 거 같죠? 간단하게 설명하자면 우리가 알고 있는 시간표, 가계부, 등이 표로 만들어져 있습니다 그러면 표를 HTML에서 만들려면 어떤 요소/요소들이 필요한지 알아볼게요 먼저 "이 내용들이 표다"라고 지정할 이 필요합니다 그리고 "이건 표의 열 이다"라고 지정할 , "이건 표의 행이다"라고 지정할 가 있습니다 **'열'과 '행'이 헷갈리시는 분들은, '열'은 가로줄, '행'은 세로줄이라고 생각하시면 쉬우실 거예요** 이번 편에서는 정말 간단한 시간표 2개를 만들면서 HTML에서 어떻게 표를 만들고 열과 행을 어떻게 사용할 수 있.. 2020. 12. 21.
HTML 쉽게 배우기 | 양식 <form> 2 안녕하세요 오늘은 에서 사용되는 , , 그리고 에 대해서 알아볼게요 이력서 같은 양식을 보면 인적사항, 학력사항, 자격증, 등등 나눠져있는걸 볼수있죠 이렇게 각 섹션을 만들때 을 사용합니다. 의 정의는 양식에 비슷한 내용들을 그룹화 하는데 사용되는 요소입니다. 이 요소를 사용하면 요소 안에있는 내용 주위에 박스를 그립니다. 이 박스를 그림으로서 양식의 내용들이 어떤식으로 그룹됐는지 알아보기 쉬워집니다. 양식을보면 각 섹션에 제목이 있는걸 볼수있습니다 으로 양식의 내용들을 나누었으면, 로 나누어진 각 그룹에 제목을 붙일수 있습니다 이 요소는 의 제목을 정하는 요소이기 때문에 밖에서 사용하면 그 의미를 잃어버립니다. 그렇게 때문에 안에서 사용합니다. 종이 양식에서는 볼수 없지만, 온라인 양식에서는 한번쯤은 .. 2020. 12. 12.
반응형

티스토리툴바