후회가 없도록

※ 해당 글에서는 CSS의 선택자를 임의로 태그명을 호출하는 것처럼 작성했지만, 실제로는 선택자 작성 방법을 참고하여 호출할 것. 1. CSS 박스 모델 HTML과 CSS에서는 각 태그와 구역을 박스 모델로써 나타낸다. 그리고 여러 개의 박스 모델들이 각각 아래와 같은 구조를 가지며 차곡차곡 쌓인 것이 웹 페이지이다. 이 박스 모델은 margin, border, padding, content로 구성된다. 이 중 margin, padding은 구역의 넓이와 높이, 여백 등을 설정할 수 있는 속성으로, 상하좌우 설정이 가능하다. top, right, bottom, left 순서로 한 줄에 속성값 작성도 가능하다. /* 상하좌우 중 원하는 방향 속성만 지정 */ box { margin-top: 50px; ma..

1. 선택자 CSS에서는 선택자라는 것이 있는데, 이는 HTML의 어떤 영역과 요소에 스타일을 적용할지 가리키는 것이다. 크게 태그 Type, Class, ID로 구성되어 있고, 세 가지 모두 각 태그의 인라인 설정(속성)에서 확인할 수 있다. 1) Type 태그명으로 요소를 선택 childTag { 속성: 속성값; } 2) Class 클래스 속성값. 태그 속 class 속성의 속성값으로, CSS에서는 클래스 바로 앞에 마침표(.)를 찍어서 표현한다. .ClassName { 속성: 속성값; } 3) ID ID 속성값. 태그 속 id 속성의 속성값으로, CSS에서는 ID 바로 앞에 샵(#)을 붙여서 표현한다. #IDName { 속성: 속성값; } 4) 같은 부모 선택자 내에서 특정 자식 선택자만 고르고 싶..

웹 페이지의 디자인을 책임지는 CSS 1. 기원 1) 누가 하콤 비움 리(Håkon Wium Lie) 2) 언제 1994년 10월 10일 3) 어디서 - 4) 어떻게 - 5) 왜 웹 페이지를 디자인하는 방법으로는 기존에 HTML의 태그 내부에서 또는 태그를 통해 추가하는 방법이 있었다. 하지만 점점 디테일하고 높은 수준의 디자인 수요가 늘어나고, HTML에는 웹 페이지의 정보를 다루는 것에 집중을 하기 위해 CSS(Cascading Style Sheet) 파일을 따로 생성하여 적용하게 된 것이다. CSS는 지금까지 여러 버전을 거쳐왔는데, CSS1은 1996년 12월 W3C의 권고 사항으로 나온 버전으로 모든 HTML의 태그에 대한 간단한 시각적 포맷 모델과 CSS의 언어에 대한 설명이 담겨있다. CSS..

이 글의 내용은 HTML5를 기준으로 공부한 내용을 정리한 글이다. 아래 태그 중에는 몇 가지 태그를 제외하고 HTML5 외 버전이나 브라우저에서 사용할 수 없는 태그도 존재함을 유의할 것. 태그 정리에 앞서 HTML에서 알아두면 좋은 내용 1. HTML 주석 기호: 2. VSC(Visual Studio Code)에서 작성하는 경우에 !(느낌표) 하나를 입력한 후, 탭(tap) 키를 누르면 VSC에서 기본적인 구조를 작성해준다. 3. HTML에서 한글을 사용하기 위해서는 : 문서와 관련된 요약 정보를 담는 태그 4) : 눈에 보이는 웹 사이트의 내용과 모든 구조의 설계 내용을 담는 태그 5) : character setting의 약자로, 모든 문자(한글 등)를 웹 브라우저에서 깨짐 없이 표시할 수 있게 ..

한 달 전에 클론 코딩으로 만든 자그마한 프로젝트를 블로그에 정리하기 위해 오랜만에 열어보았다. 고작 'index.html', 'style.css', 'app.py'라는 이름의 3개 파일이 전부인데도, 그 사이에 몇몇 부분은 까먹거나 이해가 안 갔다. (하... 이제부턴 진짜 프로젝트와 공부도 중요하지만, 거기서 배운 점, 어려웠던 점 등을 기록으로 남기는 과정도 중요하게 여기고 기록해야겠다...ㅠㅠ) 그래도 나름 쉬운 언어(언어라고 하기에도 부끄럽지만)였기 때문에 다시 수정해보고, 결과를 보는 건 재밌었다. 그. 런. 데. 도저히 이해가 안 가는 게, 어느 순간부터 CSS 파일을 수정하고 위치를 바꿔서 링크해도 HTML에서 제대로 적용이 안 된다. CSS 파일을 제거했을 때 아예 HTML 모양이 망가지..

웹 서비스 개발 및 배포를 위해선 프론트엔드(front-end)와 백엔드(back-end)가 구성이 되어야 하고, 그중 시각적이고 직관적인 부분을 담당하는 프론트엔드는 우리 눈에 보이는 웹 페이지 자체를 만드는 영역입니다. 그리고 웹 페이지를 제작하기 위해선 HTML, CSS, JS(Javascript, 자바스크립트)라는 3가지 구성요소를 이해하고, 사용할 줄 알아야 합니다. 이 글에서는 강의(스파르타코딩클럽)와 함께 제가 이해한 내용을 바탕으로 정리한 내용입니다. 우선 이 글을 요약하면 다음과 같습니다. 웹 페이지 제작에는 HTML, CSS, JS, 이렇게 3가지 도구 및 언어를 알아야 하며, 이 3가지 요소는 사람으로 비유했을 때 다음과 같은 역할을 합니다. 1. HTML: 사람 신체의 뼈, 신체 구..