프론트엔드개발10 [Task] 1일차 과제 - 에이블런 프론트엔드부트캠프 1일차 HTML 구조 분석부터 시작하여 화면 요소가 무엇이 있고 이를 어떤 순서로 작성할지 고민했다. section 안에 제목, 사진 본문, 링크 등이 들어가야 한다. 제목이 최상단, 그다음 이미지, 그리고 본문 순대로 작성해야한다. section> h1>Lorem ipsumh1> div class="img"> img src="./img/crown.png" alt="왕관이미지"> div> h4>Lorem ipsum dolor, sit amet consecteturh4> p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet explicabop> h4>Lorem ipsum dolor, s.. 2024. 7. 16. [CSS] CSS 속성 - 에이블런 프론트엔드부트캠프 1일차 1. 크기 지정크기 지정은 width(가로)와 height(세로)를 사용한다. 단위는 다음과 같이 사용할 수 있다. 속성명속성값설명width, heightpx너빗값과 높잇값을 px 단위로 지정%부모 태그를 기준으로 너빗값과 높잇값을 % 단위로 지정vw브라우저의 너비를 기준으로 너빗값과 높잇값을 백분율로 지정vh브라우저의 높이를 기준으로 너빗값과 높잇값을 백분율로 지정 2. margin & paddingmargin(바깥쪽 여백)과 padding(안쪽 여백)을 통해서 HTML에 여백을 줄 수 있다. margin과 padding 모두 크기 지정 속성과 단위가 동일하며 margin을 활용해 가로 기준 가운데 배치를 할 수 있다. /* 레이어를 화면 중앙에 옮김 */ margin: 0px auto; 3. bo.. 2024. 7. 15. [HTML] HTML 태그 - 에이블런 프론트엔드 부트캠프 1일차 HTML은 웹 페이지를 구성하는 텍스트, 이미지, 링크 등 모든 요소를 구성하고 구조를 정의하는 언어이다. 이 언어를 활용하여 웹 페이지의 내용을 채우고 사용자에게 정보를 제공할 수 있다. 오늘은 HTML의 태그에 대해서 공부했다. 1. 시멘틱 태그시멘틱 태그는 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그이다. HTML 5로 버전업 되면서 div 태그가 아닌 시멘틱 태그를 활용해 HTML을 구성한다 시멘틱 태그의 종류는 다음과 같다종류설명header웹 문서의 머리말 영역nav웹 문서에서 메뉴 영역 ( 링크 등 )figure웹 문서에서 다양한 미디어를 담는 영역main웹 문서의 본문 영역aside웹 문서의 본문과 연관성이 적은 외부 영역section웹 문서의 특정 영역을 그룹화article웹 문서에서 .. 2024. 7. 15. [CSS] CSS 선택자 - 에이블런 프론트엔드부트캠프 1일차 CSS에는 HTML의 태그들에게 개별적으로 스타일을 적용시키기 위해 다양한 선택자들이 존재한다. 이들을 여러가지 조건에 맞춰 다양하게 사용함으로써 화면을 다채롭고 아름답게 변화시켜준다. 오늘은 스타일을 지정하기 위한 선택자들을 공부했다. 1. 전체 선택자전체선택자로 사용되는 ' * ' 은 모든 HTML 요소를 한 번에 선택한다. 전체선택자 * 는 아래와 같이 사용할 수 있다./* 전체 선택자 */ * { border: 1px solid lightblue;} 2. 태그 선택자태그 선택자는 태그명을 이용하여 HTML 요소를 선택할 수 있다. 태그 선택자는 아래와 같이 사용할 수 있다/* 태그 선택자 */ h1 { border: 1px solid red;} 3. 자손 선택자자손 선택자는 앞에.. 2024. 7. 15. 이전 1 2 다음
