CSS로 레이아웃을 구성할 수 있는 방법은 다양합니다.예전에는 `float`, `clear`, `position` 등을 활용해 구조를 잡는 경우가 많았지만,최근에는 `display` 속성을 활용해서 레이아웃을 잡는 방식이 가장 보편적이고 간결하게 쓰이고 있다고 생각합니다. 저도 앞으로 이 방식을 사용할 예정이라, 잊지 않기 위해 블로그에 정리합니다.! display 속성으로 레이아웃 잡기1. `display: flex` 블록 요소 (block) 처럼 동작하는 플렉스 컨테이너를 정의.자식 요소들이 flex-item 이 되며, 수평 또는 수직 정렬을 자유롭게 설정할 수 있음 .container { display: flex; } 2. `display: inline-flex`인라인 요소처럼 동작하는 flex ..

CSS 는 뭘까? CSS = Cascading Style SheetCSS 는 HTML 요소의 style을 정의하는 데 사용됩니다.HTML 외부에서 CSS 파일 로드하는 방법 ( 가장 권장 )``HTML 내부에서 Embedding style로 CSS 적용하는 방법``Inline style 로 CSS 적용하는 방법` Hello World` Reset CSS모든 웹 브라우저마다 각자만의 디폴트 스타일을 가지고 있어서 css가 없어도 작동함.But. 각자만의 스타일이라는 말은 브라우저마다 같은 태그라도 보이는 스타일이 다른다는 걸 의미. 그럴 때 사용되는 것이 `Reset CSS`  👉🏻https://meyerweb.com/eric/tools/css/reset/ 이거 복사해서 사용하면, CSS를 초기화하는 ..

세상에 존재하는 모든 웹 페이지는 HTML로 작성됩니다HTML = 웹사이트의 구조를 이루는 뼈대CSS = 웹사이트에 살을 붙이고 옷을 입히는 스타일링JS = 웹사이트가 사용자와 상호작용할 수 있도록 움직임을 더하는 관절HTML → Hypertext Markup Language 즉, 마크업 언어는 “자료의 구조(웹페이지)를 표현하기 위한 언어” 1. 마크업(Markup)마크업(Markup)은 문서의 구조를 정의하는 태그 기반 언어를 의미한다.대표적인 마크업 언어: HTML, XML예시 2. 마크다운(Markdown)마크다운(Markdown)은 더 쉽게 문서를 작성할 수 있도록 만든 경량 마크업 언어.HTML 같은 마크업 언어보다 간단하고 직관적이면서도, 웹에서 HTML로 변환이 가능하다.대표적인 사용처: ..

WEB 창시자 팀 버너스리월드 와이드 웹(www)의 개념을 제안하고 이를 구현하기 위해 html을 개발하셨다. HTML ( HyperText Markup Language) 가 뭔가요?: 웹을 이루는 가장 기초적인 구성 요소로, 웹 페이지 내용 서술, 정의하는데 사용합니다."태그" 라는 개념으로 구분합니다. // 제가 생각하기엔 웹 페이지의 뼈대를 만드는 언어라고 생각합니다..  하이퍼텍스트(HyperText) 가 무엇이냐.하이퍼 "텍스트" 를 클릭하면 다른 페이지로 이동할 수 있는 텍스트를 말한다. 쉽게 말해서 "링크"를 클릭한다 가 대표적인 예시가 될 수 있다. 마크업 (Markup) 은 또 무엇이냐.태그 라는 개념을 사용해서 문서의 구조를 정의하는 방식이라고 볼 수 있다.  `` 태그로 감싸거나 문단..