728x90 코딩 공부4 (2-1) HTML/CSS 중급 - 레이아웃 HTML 구성하기 대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐른다. CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행한다. 실제 VS Code 의 레이아웃을 분석해 큰 틀에서 추상화하면 다음과 같이 영역을 나눌 수 있다. CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례로 적용한다. HTML 문서를 통해 레이아웃을 작성하면 다음과 같이 구성할 수 있다. 아이콘 1 아이콘 2 아이콘 3 영역1 영역2 영역3 영역4 영역5 [코드] 레이아웃을 고려해 작성된 HTML 파일 참고 : 클래스 이름으로 지정된 w10, w20, w70 또는 h20, h40, h80 을 CSS로 구현하면 다음과 같다. .w70 { width : 70%; } .. 2021. 8. 3. (1-5) HTML/CSS 기초 - CSS 기초 (박스 모델) 모든 콘텐츠는 영역이 있다. 모든 컨텐츠는 각자의 영역을 가지며 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 된다. 박스는 항상 직사각형이고 너비와 높이를 가진다. CSS를 이용해 속성과 값으로 그 크기를 설정한다. 다음 예제에 width와 height 속성을 넣어 테스트해보자. 박스가 차지하는 영역을 시각적으로 확인하기 위해 배경색을 꼭 넣어보자. Basic document flow I am a basic block level element. My adjacent block level elements sit on new lines below me. By default we span 100% of the width of our parent element, and we are as .. 2021. 7. 10. (1-2) HTML/CSS 기초 - HTML 기초(자주 사용하는 HTML 요소) 자주 사용하는 HTML 요소에 대해 알아보자. 태그 설명 Division Span Image Link & Unordered List & List Item Input (Text, Radio, Checkbox) Multi-line Text Input Button div VS span, div와 span의 큰 차이는 한 줄을 차지하느냐 아니냐이다. 물론 css를 이용해 바꿀 수도 있지만 기본적인 값은 그렇다는 것이다. div 태그는 한 줄을 차지합니다 division 2 span 태그는 컨텐츠 크기만큼 공간을 차지합니다 span 2 span 3 division 3 결과는? 👇🏻 img : 이미지 삽입, img 태그는 닫는 태그가 필요하지 않다. a : 링크 삽입 코드스테이츠 ul,li : 리스트 li = li.. 2021. 7. 10. (1-1) HTML/CSS 기초 - HTML 기초 (기본구조와 문법) HTML은 웹 문서를 구조적으로 표현하기 위한 언어이다. HTML은 tag들의 집합이며, tag란 부등호()로 묶인 HTML의 기본 구성 요소이다. / 이 문서가 HTML 문서임을 명시 / / html 시작 태그로, 문서 전체의 틀을 구성 / / 은 해당 태그가 끝났음을 의미 / / body 태그는 문서의 내용을 담는 곳 / Hello world/ heading을 의미하며, 크기에 따라 h1부터 h6까지 있음 / Contents here/ content division을 의미하며, 줄바꿈됨 / Here too!/ 줄바꿈이 없는 content 컨테이너 / / div 태그가 끝났음을 의미 / / body 태그가 끝났음을 의미 / / html 태그가 끝났음을 의미 / SELF-CLOSING TAG 태그 내부에.. 2021. 7. 10. 이전 1 다음
