레이아웃 >> 특정한 공간에 여러가지의 구성요소를 보기좋게 효과적으로 배치하는 작업 >> HTML, CSS를 통해 여러 레이아웃 작성방법들을 제공 레이아웃을 만드는 방법 1. table을 통한 레이아웃 처리 2. div을 이용한 레이아웃 처리 3. 시맨틱 태그를 이용한 처리 sementic(의미) 태그 태그명 그 자체가 의미를 가지고 있는 태그 - 요소가 스스로 브라우저와 개발자 모두에게 자신이 왜 쓰였는지를 직관적으로 보여주는 요소 - 기존 div등의 요소로 레이아웃을 제작했을 때 영역 및 목적의 파악이 늦어지는 단점을 보완하기 위해 등장한 태그(요소) 1. header - 도입부에 대한 내용을 정의하는 태그(html 머리를 정의하는 태그) 2. nav - html 문서 사이를 탐색할 수 있는 링크들의..

html의 모든 요소들은 웹 브라우저에 어떤식으로 보이는가를 결정짓는 display라는 속성이 있다 기본적으로 block 혹은 inline 속성을 가지고 있다 block : 언제나 새로운 라인에서 시작하는 속성(영역 설정가능) >> h, ul, ol, p, div ★div : 다른 HTML 요소들을 하나로 묶어주는 대표적인 block 요소 레이아웃을 구성하거나 요소들의 공간을 분할하여 웹 페이지 스타일링에 자주 활용되는 요소 >> 여러 요소들의 스타일을 한번에 적용할 때 유용 inline : 요소의 너비가 해당 요소의 컨텐츠만큼만 차지하는 속성 >> img, a, span ★span : 텍스트(컨텐츠)의 특정부분을 묶는데 자주 사용되는 대표적인 인라인 요소 div 실습 division division d..

테이블 : 여러 종류의 데이터를 보기좋게 정리하여 보여주는 표 과거에는 테이블을 이용해서 홈페이지의 전체적인 레이아웃을 구성하기도함 현재는 다른 방식(레이아웃 파트에서 배움)을 선호하는 편 게시판을 구성할 때 가장 많이 사용된다 기본으로 적용시킨 스타일 테이블의 구성 예시 1-1 1-2 2-1 2-2 3-1 3-2 table : 표를 감싸는 태그 tr : 표 내부의 행 th : 행 내부의 제목 td : 행 내부의 일반 셀 thead : 테이블의 헤더를 표현하는 태그 tbody : 테이블의 바디를 표현하는 태그 테이블 속성 colspan : 테이블의 열을 통합할 때 사용 rowspan : 테이블의 행을 통합할 때 사용 테이블 실습 1 이름 점수 특이사항 aaa 0 컨닝 bbb 50 없음 ccc 100 없음..

html 링크(a) >> 다른 사이트로 연결되는 하이퍼링크(하이퍼링크를 줄여서 링크라 부름) 네이버 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 리스트 : 요소들을 나열한 목록이나 명단 >> 웹 페이지의 메뉴를 구성할 때 주로 사용되는 html 리스트의 종류 1. 순서가 없는 리스트(활용多, ul + li태그의 조합) 고양이과 동물 1. 고양이 2. 호랑이 3. 사자 4. 삵 5. 퓨마 2. 순서가 있는 리스트 고양이과 동물 1. 고양이 2. 호랑이 3. 사자 4. 삵 5. 퓨마

html 요소에 스타일 적용하기 >> html 태그 내부에 style이라는 속성을 사용하여 적용할 수 있지만 일반적으로는 style 태그 내부에서 속성명과 값을 선언하여 쓰거나 외부에서 css파일을 만들어 적용시킴 test1 test2 html에 이미지 적용시키기 1. img 태그 활용 2. 태그의 배경으로 지정하기 EX) test1 test2

서식 : 텍스트에 다양한 효과를 주는 여러 태그들 >> css스타일 지정으로 대체할 수 있기 때문에 잘 쓰이지 않음 아이콘 로딩 등 전혀 다른 기능으로 사용되는 경우가 대부분 서식 종류 b, strong, i, em, mark, del, blockquote 나는 b태그 입니다. 나는 강력한 태그입니다. 나는 i태그 입니다. 나는 em태그 나는 mark 나는 del blockquote 나는 평범한 글자 >> strong : 타 개발자에게 강조 >> i : 기울임보다는 아이콘으로 쓰임 >> 서식은 대체로 css속성에서 설정함 html에서 하면 변경 어려움 엔티티(entity) : 현실세계의 사물 >> 예약어 : 문자 자체가 이미 기능이 있는 문자들 html에서의 엔티티 &엔티티명 or &#엔티티숫자 &nbs..

제목 1번입니다. 제목 2번입니다. 제목 3번입니다. 제목 4번입니다. 제목 5번입니다. 제목 6번입니다. h태그의 특징 >> h태그를 기준으로 키워드(정보)를 수집 및 파악 >> h태그를 기준으로 위아래로 약간의 여백(마진)이 생성된다 paragraph(단락) 단락 : 내용상 끊어서 구분할 수 있는 하나하나의 부분(=문단) >> html에서는 태그를 이용하여 단락을 표현한다 >> p태그도 h태그와 마찬가지로 위아래로 약간의 여백이 생성된다 이것이 단락입니다. html에서의 띄어쓰기와 줄 나누기 동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우 리 나 라 만 세 무궁 화 삼 천리 화 려 강사 아아아 아안 위의 코드의 실행결과는 개행, 공백 2칸이상일 경우가 있어도 무조건 공백 1칸으로만 인식한다 >>..

태그와 주석 주석 : 컴퓨터가 인식하지 못하는 코드 코드에 대한 설명이나 개인 학습에 많이 사용된다. (범위지정 후 ctrl+/) (주석안에 또 주석이 있으면 인식을 제대로 못함) 텍스트 태그(요소) 제목 단락 서식 인용구 주석 엔티티 문자셋 태그(요소)의 기본구조 요소 : 태그+내용 태그 : html, body 등등 내용(컨텐츠) : 태그 내부에 들어오는 문자들 html 요소의 구조 //태그명 속성명 속성값 123123123213 html 요소 작성의 규칙 1. 속성명은 소문자로 작성 대문자로 작성해도 인식은 가능 2. 속성값은 반드시 따옴표로 감싸줄 것 일부 속성값은 에러가 안날수도 있다.