본문 바로가기

분류 전체보기

(138)

[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..

[HTML 기초] 3. HTML 태그 - 텍스트 관련 태그(h1~h6, p, b, br, ol, ul, li, a) 1. 태그의 구조 기본적인 태그의 구조는 아래와 같습니다. 앞부분을 열린 태그(Opening tag), 뒷부분을 닫힌 태그(Closing tag)가 하고 그 사이에 내용이 들어갑니다. 열린 태그 안에 속성(Attribute) 값이 들어가는데 이를 활용해 태그를 효율적으로 활용할 수 있습니다. 열린 태그와 닫힌 태그, 그 사이의 내용을 모두 포함한 것을 요소(Element)라고 합니다. 참고) 요소를 구성하는 태그 사실 위의 그림은 요소의 구조라고 하는 것이 정확합니다. 요소는 웹 페이지를 구성하는 것으로, 요소를 구성하는 것 중 하나가 태그인 것이지요. 하지만 여기서는 태그를 사용하는 방식을 이해하기 위해 태그의 구조라고 소개했습니다. 요소에 대한 구체적인 내용이 궁금하다면 여기를 참고하세요. 2. 기초..

[HTML 기초] 2. 환경 세팅 & HTML 구조 (feat. vscode 사용 꿀팁) 1. 환경 세팅 HTML 문서를 작성하기 위해서는 전용 편집기가 필요합니다. 웹 개발을 할 때 주로 사용하는 에디터는 vscode라는 것으로, 여기에서 다운로드할 수 있습니다. Extensions(확장 플러그인) 추천 vscode를 다운받은 상태 그대로 사용하는 것보다 Extensions를 활용해 내 입맛에 맞게 커스텀해서 사용하면 효율적으로 코딩을 할 수 있습니다. vscode를 열었을 때 왼쪽 사이드 바의 가장 아래쪽 아이콘을 클릭하면 플러그인을 검색하는 창이 나올 것입니다. 여기에 원하는 플러그인을 검색해서 설치하시면 됩니다. 굉장히 많은 플러그인이 있으니 개발을 하면서 나에게 맞는 환경을 구성해보는 재미도 쏠쏠합니다! 우선 가장 유용하다고 생각하는 두 가지를 추천합니다. (절대 후회 안 함) Pr..

목록 더보기

티스토리툴바