프론트엔드 입문 가이드/CSS 기초 (4) 썸네일형 리스트형 [CSS 기초] 3. CSS 문법 & 선택자 1. CSS 문법 CSS 문법은 선택자(selector)와 속성(property), 속성에 대한 값(value)으로 구성됩니다. 아래와 같이 선택자를 쓰고 중괄호 사이에 속성과 값을 작성하면 됩니다. 이 의미는 "해당 선택자에 대한 이 속성을 이 값으로 설정해줘"라고 선언하는 것입니다. 하나 주의해야 할 것은 값 뒤에 세미콜론 붙이는 것을 잊지 말아야 한다는 것입니다! 예를 들어, 아래 코드는 "h1태그의 color를 blue로 설정해줘"라는 의미입니다. h1{ color: blue; } 2. 선택자 선택자는 HTML 문서에서 스타일을 적용할 대상을 말합니다. CSS 문법에서 선택자 자리에 올 수 있는 것은 선택자와 선택자 목록입니다. 우선 선택자의 종류를 살펴보고 선택자 목록을 만드는 방법을 알아보겠습.. [CSS 기초] 2. HTML에 스타일을 적용하는 방식 1. 개요 HTML 문서에 스타일을 적용하는 방식은 3가지가 있습니다. 인라인 스타일 내부 스타일 시트 외부 스타일 시트 각각을 하나씩 알아보고, HTML 문서 내에서 스타일을 적용하는 방식(인라인, 내부)과 CSS 파일을 별도로 만들어 적용하는 방식(외부)을 비교해보도록 하겠습니다. 2. 인라인 스타일 HTML 태그에 style 속성을 적용하는 방법입니다. 해당하는 태그에만 스타일이 적용됩니다. 스타일 적용 스타일 적용 3. 내부 스타일 시트 HTML 파일에서 태그를 이용하는 방식입니다. 스타일 적용 스타일 적용 4. 외부 스타일 시트 CSS 파일을 별도로 만들어 HTML 문서와 연결해주는 방식입니다. HTML 파일에서 태그를 이용해 외부의 CSS 파일을 연결합니다. 스타일 적용 스타일 적용 5. 세 .. [CSS 기초] 1. CSS란? 1. CSS란? CSS는 HTML 문서를 꾸며주는 언어입니다. CSS 작업은 흰 배경위에 검은 콘텐츠만 있던 HTML 문서를 예쁘게 스타일링하고 보기 좋게 레이아웃을 조절하는 것이라고 할 수 있습니다. 아래의 HTML 총정리를 하며 만들었던 페이지는 보기 좋지 않습니다. 눈길을 끄는 요소가 전혀 없어 정보를 전달하는데 비효율적이며 사람을 모으기 힘들다고 볼 수 있습니다. 반면, CSS를 활용해 웹 페이지를 만들면 아래와 같이 조금은 보기 좋게 만들 수 있습니다. (디자인적 감각이 필요한 부분이지만.. 쌩 HTML 보다는 낫지 않나요..?) 2. Cascading Style Sheets 우리는 CSS가 무엇인지, 어떤 역할을 하는지 예시를 통해 직관적으로 파악했습니다. 이번에는 CSS 단어 자체의 의미를 .. [CSS 기초] 0. 소개 1. 들어가기 앞서 CSS를 배우기 전에 미리 알아야 하는 필수 사전 지식이 있습니다. 바로 HTML! HTML이 무엇인지 HTML을 어떻게 작성하는지 정도는 알아야 합니다. 만약 그렇지 않다면 이곳에 가셔서 한 번 쓱 훑어보시기 바랍니다. 2. 내용 CSS에 대한 개념 CSS 스타일링 CSS 레이아웃 CSS 꿀팁 모든 설명의 기반은 공식문서 기준입니다. 아래 링크를 참고해 큰 틀을 잡고 살을 붙여 글을 작성할 예정입니다. 여러분들도 꼭 한 번 읽어보시기를 추천합니다! https://developer.mozilla.org/ko/docs/Learn/CSS CSS를 이용한 HTML 스타일링 익히기 - Web 개발 학습하기 | MDN CSS(Cascading Stylesheets – 종속형 스타일시트)는 HT.. 이전 1 다음
