EunSeo's Dev Story

박스 모델과 관련된 CSS 속성들 - .html 파일에서 .(dot)을 입력하고 내가 사용할 class의 이름을 입력하게되면 자동완성 기능을 통해 사용할 클래스 이름의 div 태그가 자동완성된다. .container { background-color: orange; height: 200px; padding-top: 30px; padding-left: 30px; width: 70px; } .item { background-color: royalblue; height: 70px; max-width: 150px; margin-bottom: 30px; border: 4px solid red; border-radius: 30px; box-shadow: 30px 10px 30px rgba(0,0,0,0.5); } ..

CSS는 이렇게 작성해야해요 h1{ color: red; font-size: 30px; } 선택자 {속성: 값;} - 선택자의 개념은 HTML 파일의 어떤 요소를 선택할 것인지 정하는 것이다. - "속성: 값 ;"의 형태가 여러 개 있을 수 있다. - .html파일에서 class 속성을 가지고 있는 요소를 변경할 경우 .class 이름을 적어준다. CSS 선택자 태그 선택자 클래스 선택자 - 클래스를 선택할 경우 . (dot)을 사용해야 된다! 하위 선택자 - 하위선택자는 div라는 요소 안에 들어있는 것들 중에 .orange class를 가지고 있는 요소들을 의미한다. - 띄어쓰기는 하위 선택자라는 것을 의미한다. - 위 코드 해석은 .orange라는 클래스의 요소들을 찾는데, div의 하위인 요소들을..

HTML은 이렇게 작성해야 해요 Hello World! 내용 내용 내용 Hello World! 내용 - / (슬래시)가 있는 태그는 종료태그, 닫힌태그라고 부른다. - 태그 사이 부분에 내용과 다른 태그를 입력할 수 있다. - 태그에는 속성과 값을 사용할 수 있다. - class는 h1태그에 또 다른 별명이 된다. 비어있는 태그도 있어요 - br : break의 약자로 종료태그가 없고, 줄바꿈을 할 때 사용한다. - img : image의 약자로, source에 이미지의 경로를 추가하면 이미지가 추가된다, alt는 alternative의 약자로 이미지의 이름을 지정할 수 있다. HTML 요소의 부모와 자식 관계 Apple Banana -ul 내 li들은 ul의 자식 요소이고, li들은 ul이 부모 요소가..

01 박스 모델 박스 모델 구조 - 컨텐츠를 감싸는 3가지의 축 margin과 padding의 차이 - margin -> border -> padding 순서로 여백을 만든다. margin과 padding을 작성하는 방법 - margin-left, margin-right 등 직접 값을 지정해도 되지만 위 코드처럼 한 줄에 작성이 가능하다. - {margin : top right bottom left;} 순서로 값이 적용된다. 02 Block 요소와 Inline 요소 - block 요소 : Y축을 기준으로 요소들이 생성된다. - inline 요소 : X축을 기준으로 요소들이 생성된다. Block 요소의 특징 03 margin 병합 현상 형제지간의 마진 병합 - 다음과 같이 top과 bottom일 경우에 둘..

03 구조를 잡을 때 사용하는 태그 - 목차 : 로고, 카테고리 등을 담고 있다. - 본문 : 페이지에 대한 메인 정보를 담고 있다. - 부록 : 사업자 등록번호, 언어, 이메일, 연락처 등을 담고 있다. 웹사이트 목차 부분을 담당하는 , 태그 홈 카테고리 설정 - 태그 : 웹사이트의 머리글 (목차)를 담는 공간 - 태그 : 메뉴 버튼을 담는 공간, , , 와 함께 사용 목차부분 실행결과

02 HTML 기본태그 HTML이란? - Hyper Text Markup Language : 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어 - HTML은 시간이 지남에 따라 자주 사용되지 않는 용어들은 사라지고 시대에 맞춰 새로운 신조어가 등장 - 현재는 HTML 5 버전을 사용하고 있다. - Legacy : 과거에 사용되었지만 지금은 사용되지 않는 코드 HTML 태그 구성 요소 컨텐츠 태그명 : HTML이 갖고 있는 고유의 기능, 형태로 입력 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물 속성 : HTML 태그가 갖고 있는 추가 정보 속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것 HTML 문서의 기본 구조 - : HTML 5라는 신조어로 문서를 선언하는 태그..

01 웹을 구성하는 요소 프로그래밍이란? 컴퓨터와 소통하는 방법(코딩)을 의미 컴퓨터에게 전달하는 정보를 어떻게 보여주고 제어할지 결정 가능 웹 개발을 하기 위한 언어로 브라우저와 소통 HTML, CSS, JavaScript - 특정한 목적에 따라 사용하는 언어가 다르다. 웹 사이트 제작은 건물 짓기와 유사 o HTML 실습 코드 HTML 문서를 구성하는 태그 안녕 엘리스! 실습 결과