츔로그

CSS : Box model 태그들의 시각적인 부피감을 결정하는 중요한 요소 border 테두리 padding 테두리와 콘텐츠 사이의 여백 margin 다른 콘텐츠의 margin과의 거리 width, height 콘텐츠의 크기 block elements 의 box model BOX1 BOX2 BOX3 inline element의 box model BOX1 BOX2 BOX3

CSS : Display 선택된 태그에 대한 가장 큰 틀의 디자인 규범을 결정하는 속성 display: block 화면 전체를 사용한다.(한줄을 다 사용한다) 속성으로 width, height, margin, padding 속성을 사용할 수 있다. 요소 태그 : , , ~ , , , , , , , display: block;

HTML 코드로 동영상 '구간 재생' 하기 영상설명1 영상설명2 src(source) 의 링크 끝에 ?start= & end = 를 지정해주면 구간 재생을 만들어낼 수 있다.

웹페이지를 아름답게, CSS 실행방법 inline (인라인) 태그에 style 속성 값으로 css 코드를 위치시킨다. HELLO, BLUE SEA ; 는 선언과 선언을 구분한다. style tag (스타일 태그) style 태그 안에 css 코드를 위치시킨다. 이 경우에는 선택자 (Selector) 가 필요한다. spring summer autumn winter 예) h1, li 태그 선택자 사용 클래스 선택자 . 으로 표기하며 태그 선택자보다 상위, id 선택자 보단 낮은 우선순위를 가진다. 여러개의 태그를 선택적으로 디자인 하기 위함. Spring Summer Atumn Winter 아이디 선택자 선택자중 가장 높은 순위로 #으로 구분 동일한 이름의 아이디가 중복해서 존재해서는 안된다. Spring ..

부모 자식 태그와 목록 태그 간의 관계 태그 간의 관계는 부모와 자식으로 나타낼 수 있다. 와 서로 부모-자식 관계로 볼 수 있다. 예시 츔로그 p 태그가 a 태그의 부모. a 태그가 p 태그의 자식 부모-자식 태그는 필요에 따라서 관계가 달라질 수 있다. 그러나, 고정된 관계를 가진 태그들도 있다. 고정된 관계 목차를 만드는 태그는 list -> 목차 태그 를 활용해서 만든 음료와 사이드 메뉴 목록이다. 그런데 음료와 디저트의 목록이 눈에 잘 구분이 되지 않는다. 이럴 때 필요한 태그. 태그 unordered list 의 약자 숫자나 알파벳 등 순서가 필요하지 않은 목록을 만들 때 사용. 태그를 사용해서 분류가 다른 목록을 구분해주었다. (문단 태그 로 음료와 디저트 제품도 구분) 이처럼 li 태그에게..

태그(tag)와 속성(attribute) HTML 속성(HTML attribute) HTML 요소 유형의 수정자(modifier) 속성(attribute)은 태그의 동작을 제어하기 위해 "여는 태그" 안에 사용되는 특수 용어이다. 속성은 요소 유형의 기본 기능을 수정하거나 스스로 기능하지 못하는 특정한 요소 유형에 기능을 제공한다. 사용법 일반적으로 이름-값 쌍으로 나타낸다. 구분은 = 요소의 이름 뒤 요소의 시작 태그 안에 작성된다. 작성에 있어서 속성의 순서는 상관없다. content to be modified by the tag img 태그에는 어떤 이미지의 정보를 불러올지에 대한 '정보'가 필요하다. 이 정보를 넣어줄 수 있는 것이 바로 속성(attribute) src(source) 를 사용하면 ..

HTML 과 TAG 1. HTML에서 'TAG'란? ¹ 요소(element)는 웹 페이지를 구성한다. 요소는 데이터 항목, 텍스트 한 묶음, 이미지를 담을 수 있고, 아무것도 담지 않을 수도 있다. 일반적인 요소는 여는 태그와 몇 가지 특성, 내부의 텍스트 콘텐츠, 닫는 태그로 구성된다. 태그(tag)는 요소를 만들 때 사용한다. 예를 들면, 문단 태그 처럼, 요소 이름을 부등호 사이에 넣어서 태그를 구성할 수 있다. 닫는 태그는 이름 앞에 슬래시 문자를 와 같이 포함한다. 빈 요소의 경우에는 닫는 태그가 필요하지 않고, 지정해서도 안된다. 태그에 특성을 지정하지 않으면, 기본값을 사용한다. 웹페이지에서 오른쪽 버튼을 클릭해서 페이지 소스 보기를 눌러보면 다..

HTML 코딩 실습 환경 준비하기 1. Visual Studio Code 설치하기 더보기 ' Visual Studio Code ' 란? 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기 https://code.visualstudio.com/Download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code ed..

보호되어 있는 글입니다.