본문 바로가기

반응형

프론트엔드 입문 가이드

(12)
[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..
[HTML 기초] 7. HTML 태그 총정리 페이지 만들기 지금까지 살펴본 태그들을 이용해 "HTML 태그 총정리" 웹 사이트 하나 만들어보겠습니다. 1. 파일 생성 우선 파일을 만들어두고 시작하겠습니다. vscode 좌측 창에서 아래 사진의 빨간 부분을 눌러 5개의 파일을 생성해주세요. index.html: 홈 페이지 text.html: 텍스트 태그 소개 페이지 multi.html: 멀티미디어 태그 소개 페이지 table.html: 표 태그 소개 페이지 form.html: 폼 태그 소개 페이지 2. 홈 페이지 구현 index.html 파일에 들어가 !+tab을 눌러 html 구조를 불러오세요. 그리고 body 부분을 아래와 같이 작성합니다. 를 이용해 메뉴들을 리스트 화하고, 각 메뉴를 클릭하면 해당 페이지 넘어가도록 를 사용했습니다. 홈 페이지에서는 이 웹 ..
[HTML 기초] 6. HTML 태그 - div와 span & 구획 관련 시멘틱 태그 1. div와 span 와 태그는 다른 태그들을 감싸는 컨테이너 태그로, 자체의 의미는 없습니다. 의미도 없는 태그를 왜 쓰는가? 레이아웃을 설정하거나 CSS작업을 하는데 용이하기 때문에 사용합니다. 우선 둘의 차이점을 먼저 알아보고 각각을 어떻게 사용하는지 예시를 살펴보겠습니다. 차이점 div와 span은 태그의 너비가 차지하는 부분에 있어 차이가 있습니다. : 브라우저의 한 줄을 모두 차지 (블록 컨테이너) : 컨테이너의 크기만큼만 차지 (인라인 컨테이너) 여기서 block과 inline의 개념이 등장하는데 이는 다음 글에서 자세히 다루겠습니다. 지금은 직관적으로 브라우저 상에서 보여지는 부분이 어떻게 다른지 확인해봅시다. 두 태그를 각각 화면에 출력해보면, 차지하는 부분이 다음과 같습니다(편의 상 ..
[HTML 기초] 5. HTML 태그 - 폼 관련 태그(button, input, textarea, select, option, label, form) 1. 폼 관련 태그 사용자의 입력을 받아 제출할 수 있는 양식을 폼이라고 하고, 이러한 동작을 수행하는 태그들을 알아보겠습니다. 한 사이트에서 로그인할 때를 생각해보세요. 이때 아이디와 비밀번호를 입력하고 로그인 버튼을 누르는 과정이 사용자의 입력을 받아 해당 사이트의 서버로 제출하는 것입니다. 버튼 - button 속성 name: 버튼의 이름. 제출 시 value와 데이터를 구성함 type: submit, reset, button 중 하나 선택. 제출용이 아니라면 button으로 지정하는 것이 좋음 버튼 입력 - input 사용자의 데이터를 받을 수 있는 입력 창으로, type 속성을 이용해 꽤 많은 기능을 구현할 수 있음. 속성 참고: https://developer.mozilla.org/ko/doc..
[HTML 기초] 4. HTML 태그 - 멀티미디어, 표 관련 태그 (img, video, audio, table, thead, tbody, tr, th, td, caption) 1. 멀티미디어 관련 태그 이미지와 비디오 태그를 보면, 열린 태그와 닫힌 태그 두 개로 이루어지지 않고 하나의 태그로 이루어진 것을 볼 수 있습니다. 이렇게 하나의 태그만 가지고도 사용할 수 있는 것들이 있습니다. 주로 열린 태그와 닫힌 태그 사이에 아무런 내용이 없을 경우 하나의 태그로 해결합니다. 이미지 - image 속성 참고: https://developer.mozilla.org/ko/docs/Web/HTML/Element/img#%ED%8A%B9%EC%84%B1 src : 이미지의 경로 지정 (필수) alt : 이미지에 대한 설명, 이미지를 표시할 수 없는 경우 보여지는 값 (선택) 비디오 - video 속성 참고: https://developer.mozilla.org/ko/docs/Web/H..

반응형