온라인 강의/HTML (6) 썸네일형 리스트형 레이아웃에 영향을 미치는 속성 - float float은 선택된 요소를 왼쪽에서부터 또는 오른쪽에서부터 정렬시키고자 할 때 사용되는 CSS 속성입니다. 속성값으로는 보통 left, right이 사용됩니다. 와 의 float 속성값을 입력해보며 float에 대해 알아봅시다! float 속성 확인 float을 사용하여 .left를 왼쪽 끝에, .right를 오른쪽 끝에 배치합니다. 실행버튼을 누르고 전체화면으로 확장하여 결과를 확인해봅시다. 웹사이트 레이아웃 구조 만들기 .left와 .right과 관련된 모든 코드들을 주석 처리하고, 주석 처리 되어 있던 코드들은 주석을 해제합니다. #left를 맨 왼쪽에 정렬하기 위해 float: left;를 입력합니다. main을 #left 바로 옆에 순차적으로 왼쪽 정렬하기 위해 float: left;를 입력합니.. Block 요소와 Inline 요소 Block(블럭) 요소는 줄바꿈 현상이 나타나는 반면, Inline(인라인) 요소는 줄바꿈 현상이 나타나지 않습니다. Block 요소를 갖는 태그와 inline 요소를 갖는 태그를 입력하고, 위의 현상을 확인해봅시다! 태그 안에, Hello와 Bye를 각각 세 번씩 작성합니다. Hello와 Bye가 어떻게 출력되는지 확인합니다. DOCTYPE html> Block, Inline Hello Hello Hello Bye Bye Bye 공간을 만들때 사용하는 태그 태그 안에 태그를 사용해 웹 페이지의 상단, 본문, 하단 영역을 만들어봅시다! – 웹사이트 상단 영역 – 웹사이트 내 메뉴 버튼을 담는 공간 ... – 웹사이트 본문 내용 – 문서 내에서 독립적인 컨텐츠를 위한 공간 ... – 웹사이트 하단 영역 – 임의의 공간을 담는 공간 ... 상단 영역 가장 중요한 정보를 담는 태그 안에 태그를 사용해 엘리스 로고(elice_logo.png)를 넣습니다. 이전 실습에서 만든 메뉴 버튼을 태그 안에 넣어 입력합니다. 홈 회사 소개 연락처 Copy 본문 영역 웹페이지 본문 영역 속 텍스트 정보를 담을 ... 태그를 입력합니다. ... 태그를 사용해 소제목 회사 소개를 입력합니다. ... 태그를 사용해 본문 내용을 입력합니다. 하단 영역 임의의 공간을 만드는 태그를 입력.. 텍스트 입력하기 태그 안에 태그를 입력해 제목, 본문 내용, 목록을 웹페이지에 입력합니다. 태그는 웹사이트의 제목이나 부제목처럼, 중요한 정보를 입력할 때 사용합니다. 의 텍스트 크기가 가장 크게, 의 텍스트 크기가 가장 작게 출력됩니다. 태그는 웹사이트의 주요 텍스트 등 단락을 표현할 때 사용됩니다. 엘리스 혼자서는 어려운 코딩, 엘리스와 함께. 태그는 목록을 나열할 때 사용되며, 각 태그 안에는 태그를 입력합니다. 금요일에 코딩하는 토끼 체셔의 퀴즈 태그부터 태그에 Hello World를 입력해보고, 각각의 태그마다 텍스트 사이즈가 어떻게 다르게 출력되는지 확인해봅니다. 웹사이트에 나타내고자 하는 텍스트 정보를 ... 태그를 사용해 입력합니다. 각각의 태그 안에 메뉴를 입력해, 두 태그가 어떻게 다르게 기능하는지 확.. 링크와 이미지 입력하기 태그를 사용해 네이버 메인 페이지로 이동하는 링크와, 태그를 사용해 엘리스 로고를 출력하는 웹 페이지를 만들어 봅시다! 두 태그는 태그 안에 위치합니다. 는 텍스트, 이미지를 클릭했을 때 다른 웹페이지로 이동시키는 기능을 갖고 있습니다. 엘리스 href – 연결할 웹페이지의 URL 주소 target – 웹페이지를 연결하는 방식 는 이미지를 입력할 때 사용합니다. src – 입력하고자 하는 이미지 파일 alt – 이미지를 대신하는 설명 클릭시 다른 사이트로 이동할 수 있도록 하는 태그를 입력합니다. 네이버 홈페이지로 이동하기 위해 href="https://www.naver.com"을 열린태그 안에 입력합니다. 새로운 탭에서 웹사이트를 전환하기 위해 target="_blank" 속성값도 입력합니다. 태그 안.. HTML 문서를 구성하는 태그 태그들을 직접 작성하여 안녕 엘리스!를 출력하는 간단한 웹 페이지를 만들어봅시다! 안녕 엘리스! 를 구성하는 코드는 다음과 같습니다. 안녕 엘리스! Copy 태그 – 열린 태그 와, 닫힌 태그 로 이루어져 있습니다. (열린 태그는 시작 머리에, 닫힌 태그는 코드 입력이 끝난 후에 사용) 속성 – 텍스트를 꾸며주는 style 속성을 갖습니다. 속성값 – 텍스트 색상을 네이비로 설정하는 color:navy 속성값을 받습니다. 컨텐츠 – 태그의 컨텐츠를 **안녕 엘리스**로 설정합니다. html5 문서를 선언하는 을 입력합니다. 문서의 시작과 끝을 나타내는 태그를 입력합니다. 웹 사이트의 요약 정보를 담는 태그와, 눈에 보이는 정보를 담는 태그를 태그 안에 입력합니다. 태그 안에 문자 코드를 위한 를 입력합니.. 이전 1 다음
