- display 속성 - 화면에 어떻게 보여줄 지 설정을 하는 요소 - display 속성 값 - inline : 인라인 요소이며 block 요소를 inline요소로 변경 div태그의 기본 성질은 block을 가지고 있으며 해당 요소를 span 태그처럼 사용이 가능 width와 height 요소가 무시가 됨 앞 뒤 줄바꿈이 되지 않음 - block : 블록 요소이며 inline 요소를 block요소로 변경 span태그의 기본 성질은 inline을 가지고 있으며 해당 요소를 div태그처럼 사용이 가능 앞 뒤 줄바꿈이 가능 - none : Box가 생성이 되지 않으며, 웹 페이지에 공간을 차지하지 않음 - inline-block : inline 요소와 block 요소의 성질을 둘 다 가지고 있음 width..

- margin(마진)이란? - 요소 바깥쪽 여백 - 즉, border(테두리) 바깥쪽 여백을 설정하기 위해서 사용 - padding(패딩)이란? - 요소의 안쪽 여백을 설정 - 즉, Content(내용) 바깥쪽 여백을 설정하기 위해서 사용 - margin과 padding의 기본 사용법 - margin 기본 구조 : margin : [Top(상단)]px [Right(오른쪽)]px [Bottom(하단)]px [Left(왼쪽)]px; - padding 기본 구조 : padding : [Top(상단)]px [Right(오른쪽)]px [Bottom(하단)]px [Left(왼쪽)]px; - margin과 padding 응용 사용법 - margin : 20px; -> border(테두리) 바깥쪽의 상 하 좌 우 여..

- CSS란? - Cascading Style Sheet 약자 - HTML문서를 시각적으로 표현 - 즉, HTML이 사람이면 CSS는 옷으로 표현을 할 수 있음 - CSS 속성 - 여러 속성값이 들어가게 되면 공백으로 구분 - 속성이 선언이 되지 않으면 HTML 태그의 기본으로 설정된 속성으로 사용이 됨 - CSS 기본 구조 - 선택자(Selector) : HTML태그, class값, id값 등을 선택 - 프로퍼티(Property) : CSS설정 요소 - 값(Value) : CSS 요소에 대한 설정값 - CSS 사용 방법 - 현재 웹 페이지에 출력된 결과는 위 내용은 일반적인 태그로 사용 아래 내용은 CSS를 추가한 내용 1. HTML 문서에서 style 속성으로 사용 - HTML 태그에서 사용할 수 있..

- HTML5 이전에 레이아웃 구조 설정 - 위의 사진에 방법처럼 class또는 id 속성으로 설정을 많이함 - 현재로서도 이런식으로 많이 쓰이기도 함 - HTML5에 시멘틱 레이아웃 구조 설정 - 이러한 형태로 시멘틱 태그로 레이아웃을 설정을 할 수 있음 - Tag : 주로 머리글을 지정 -> class = "headeer" - Tag : container 영역 -> class="container" - Tag : 주로 메뉴로 설정 -> class="nav" - Tag : content 실제 내용을 적용 -> class="content" - Tag : 하단을 지정 회사정보, 저작권 등 -> class="footer"

- Tag - div 태그는 웹 페이지의 전체적인 레이아웃을 설정할 때 주로 사용 - 블록(block) 형태로 사용 - Tag - span 태그는 웹 페이지의 일부분을 설정할 때 주로 사용 - 인라인(inline) 형태로 사용 - 해당 태그의 내용을 웹 페이지의 출력 결과이며 웹 페이지 상에서는 두 개의 태그의 차이점이 없어 보임 - 확인을 위해서는 크롬에서 개발자 도구에 접속하면 해당 내용을 찍어보면 차이점을 확인이 가능 - div 태그를 확인했을 때는 문장이 짧아도 다른 영역까지의 폭을 차지하고 있는 상태 - span 태그를 확인했을 때에는 문장에 폭에 따라 문장 내용까지만 폭을 차지하고 있는 상태 - 속성 class와 id - HTML 태그에는 속성에는 class와 id로 주로 설정이 된다. - c..

- HTML이란? - Hyper Text Markup Language의 약자이다. - 웹 페이지에서 다른 페이지로 가지고 갈 수 있는 기능 - 즉, 웹 페이지의 뼈대이며, 프로그래밍 언어가 아닌 마크업 언어이다. - HTML 확장자 - 확장자는 파일명 뒤에 붙이는 이름 - HTML에 확장자는 .html, htm 이라는 확장자 포맷을 가지고 있다. - 시멘틱 마크업(Simantic Markup) - Simantic : 의미론적 - 즉, 개발자와 브라우저에게 의미있는 태그를 제공 - 시맨틱 마크업의 장점 - 접근성이 좋아짐 - SEO(Search Engine Optimization) - 코드 가독성이 좋아짐 - 코드와 재사용성이 좋아짐 - HTML 기본 용어 - 요소(Element) : - : Open 태그..