728x90 My Wiki (CodesStates)/HTML,CSS6 (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-4) HTML/CSS 기초 - CSS 기초 (텍스트 꾸미기) 글자의 속성을 바꾸는 속성은 color이다. 속성에 삽입할 수 있는 값은 HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상의 이름을 사용할 수 있다. .red { color: #ff0000; } [코드] red class의 color 속성에 #ff0000 값을 할당한다. .box { color: #155274; /* 글자 색상 */ background-color: #d4edda; /* 배경 색상 */ border-color: #c3e6cb; /* 테두리 색상 */ } [코드] 글자, 배경, 테두리의 색상은 각기 다른 속성을 가지고 있다. 글꼴 글꼴의 속성은 font-family 이다. .emphasize { font-family : "SF Pro KR", "Malgun.. 2021. 7. 10. (1-3) HTML/CSS 기초 - CSS 기초 (CSS 따라하기) CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정한다. HTML이 웹페이지의 구조를 담당한다면 CSS는 구조의 외부와 내부를 꾸미는 역할을 담당한다. 같은 HTML 구조를 가지고 있는 문서에 각기 다른 CSS파일을 적용하면 전혀 다른 웹사이트처럼 보이게 할 수도 있다. This is the header. This is the navigation section. Home Mac iPhone iPad This is the main content. ... This is an aside section. ... 개인정보 처리방침 이용 약관 법적 고지 index.html 파일을 만들어 코드를 붙여 넣어보자. 등장하지 않았던 낯선 태그를 두려워할 필요는 전.. 2021. 7. 10. 이전 1 2 다음
