우선 Table의 구조에 관하여 알아보자. - 표를 만드는 태그로써, 표 전체를 감싸는 데 사용한다. - 표의 제목이나 설명을 작성하는 태그 - 표의 행을 의미하는 태그. 자식으로 태그나 태그가 반드시 있어야 한다. - 표의 제목 열을 의미하는 태그. 부모 태그인 태그 안에 있어야 한다. - 표의 일반 열을 의미하는 태그. 부모인 태그 안에 있어야 한다. 위는 지금까지 설명한 태그들을 사용한 예시이다. 출력을 하면 이렇게 나온다. - 열을 그룹으로 묶을 수 있도록 해주는 태그이다. - 태그의 자식으로 열 단위를 나눌 수 있..

- Ordered List 순서가 있는 목록을 표현할 떄 사용한다. type 속성으로 글머리 기호를 변경할 수 있다. (ex. 계란후라이 만드는 방법) - Unordered Lists 순서가 없는 목록을 표현할 떄 사용한다. (ex. 데드 리프트, 스쿼트, 벤치 리프트처럼 순서가 없는 목록) - Listed Item (하위 태그) 목록하위 항목으로 사용되며, 태그 또는 태그의 하위에 위치한다. - Definition List 사전처럼 용어를 설명하는 목록을 만든다. (ex. A는 B이다. 와 같은 Key = Value로 사용할 떄 유용하다.) - Definition Term (하위 태그) 정의 되는 용어의 제목을 넣을 때 사용한다. - < d..

이번 시간에는, 글꼴태그, 목록태그, 표(Table)태그에 대해서 배워보겠다. - ~ Heading 웹 페이지의 제목 또는 부제목을 표현할 때 사용하며, 숫자가 작을수록 큰 제목을 표시하는데 사용한다. - Paragraph 하나로 문단을 표시할 때 사용한다. - Horizontal Rule 가로로 선을 긋는 태그이다. (종료태그 없음!!!) - Break 줄바꿈 태그로 HTML에서 개행 역할을 한다. (종료태그 없음!!!) - Italic 택스트를 이텔릭체로 표시할 떄 사용한다. - Emphasis 텍스트를 이텔릭체로 강조할 때 사용한다. - Bold 텍스트를 진하게 표시할 떄 사용한다. - 텍스트를 진하게 강조할 떄 사용한다. - 와 , 와 의 차이점 각 쌍의 앞 부분들은, 그저 표..

오늘 알아볼 것은 Emmet이다. Emmet은 HTML과 CSS에 자동완성기능을 제공하여 작성시간을 대폭 줄여주는 확장 기능이다. 한 단어로 표현하자면 '스킬'이다. 우선 오늘 실습을 진행하기 위하여 html 파일을 하나 생성하도록 하자 지금부터 Emmet의 여러 가지 기능들에 관하여 알아보자 1. !을 누르고 Enter을 눌러서 기본구조를 생성하는 기능 html의 기본 구조가 생성된다. 결론: '!'와 Enter 키를 이용하여 html의 기본 구조를 생성 가능하다. 2. 자식 노드를 자동으로 생성되는 기능 (기호 '>' 을 사용함) 예시를 한 번 들어보자 div태그 밑의 ul 태그 밑의 li태그를 쓴다고 가정해보자 그리고 tab키를 누르면 결론: '>' 기호를 사용해서 자식 태그를 일일이 타이핑하지 않..

HTML이란 무엇일까? Hyper Text Markup Language의 약자이다. 여기서 Hyper은 '최고의' 혹은 '과도한' 뜻을 가지고 있다. =>기존의 문서보다 최고의 기능을 가진 문서라는 뜻을 가진다. =>Tag로 이루어진 Markup Language이다. (프로그래밍 언어가 아님!!) 프로그래밍 언어보다 쉬움 HTML Tag에 관하여 HTML Tag는 다음과 같은 구조로 이루어져 있다. 컨텐츠 컨텐츠가 없는 태그는 종료 태그를 생략할 수 있음 (개행을 하는 br 태그나 가로선을 나타내는 hr 태그가 그 예시) 시작태그 안에는 속성을 표시할 수 가 있다. (시작 태그 앞에 있는 것이 속성명, 뒤에 있는 것이 속성값이다. HTML 문서 기본구조에 관하여 DOCTYPE html> Document ..

우선 알아보기 전에 실습을 통해 감을 잡아보도록 하자!! 1. Visual studio code를 연다. 2. 파일 => 폴더 열기를 통해 본인이 만들었던 폴더를 연다. 3. LEARN_HTML_CSS 파일 안에 learn-css 폴더와 learn-html 폴더를 만들어준다. 4. learn-html 폴더를 누르고 1_what-is-html.html 파일 생성 5. 느낌표+Enter 혹은 Enter을 누르면 코드가 자동완성된다. 6. html 파일에 우클릭 후 (혹은 밑의 파란색바에 Go live를 눌러서) 설치했던 확장파일인 live server을 실행시킨다. 7. 와 사이에 HELLO HTML!를 써보도록 하자 8. (Extra) 헬스 위키 구현해보기 DOCTYPE html> Hello_HTML 헬스..