본문 바로가기

백엔드 학습 과정

 (43)
3. 레이아웃 : 화면 나누는 법 [레이아웃 : 화면을 나누는 방법] 1. HTML 구성하기 대부분의 경우 콘텐츠의 흐름은 좌 > 우, 상 > 하 로 진행된다. CSS로 화면을 구분할 때에는 수직분할/수평분할을 차례대로 적용하여 콘텐츠의 흐름에 따라 작업을 진행. a. 수직 분할 : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록. b. 수평 분할 : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록. [Flexbox로 레이아웃 잡기] 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법. 1.display: flex 분석하기 display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법. EX) 요소를 자식으로 가진 . box1 box2 box3 ..
2. CSS 2. CSS : 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어. 예제 URL : https://codesandbox.io/s/html-cssgico-rur0eq Index.html : HTML의 내용 (웹 페이지의 구조와 내용) Index.css : HTML 내용의 배경 색상과 내용 위치 Layout css : HTML 내용의 화면을 재배치 : HTML파일과 다른 파일을 연결하는 목적으로 사용. 태그의 rel =은 연결하고자 하는 파일의 역할이나 특징을 나타냄. CSS는 이름처럼 기본적으로 stylesheet 이므로, rel속성에 stylesheet을 추가한다. Href= 속성에는 파일의 위치를 추가한다. 만일 다른 폴더에 파일이 존재할 경우, 절대 경로 또는 상대 경로를 입력해 원하는 파일을..
1. HTML 1. HTML : 웹 페이지의 구조를 담당하는 마크업 언어. HTML은 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어 [HTML의 기본 구조와 문법] [TREE STRUCTURE / 트리 구조] EX) : 이 문서가 HTML 문서임을 명시 : html 시작 태그로, 문서 전체의 틀을 구성 : 은 해당 태그가 끝났음을 의미 : body 태그는 문서의 내용을 담는 곳 Hello world : heading을 의미하며, 크기에 따라 h1 ~ h6 까지있음. Contents here : content division을 의미하며, 줄바꿈됨. Here Too! : 줄바꿈이 없는 content 컨테이너 : div 태그가 끝났음을 의미 : body 태그가 끝났음을 의미 : html 태그가 끝났음을 의미 [H..

티스토리툴바