달밤에 코딩하기/HTML CSS 공부하기 (27) 썸네일형 리스트형 #10 - HTML 태그 - 내장 컨텐츠/스크립트 내장 컨텐츠 / 스크립트 태그 내장 컨텐츠와 noscript 태그는 body에 위치하며, script 태그는 일반적으로 head 내 위치합니다. 태그 예시 캔버스 내용 태그 설명 카테고리 태그 속성 의미 값 내장 컨텐츠 iframe 다른 웹사이트를 삽입할 수 있는 태그 name 이름 src 사이트 경로 URL width 가로 크기 height 세로 크기 allowfullscreen 전체 화면 모드 여부 Boolean frameborder 테두리 사용 여부 1은 사용, 0은 사용 안함 1, 0 sandbox 보안을 위해 읽기전용으로 불러올지 여부. 보안은 강화할 수 있으나 일부 스크립트가 동작하지 않을 수 있음 allow-form: 양식 제출 허용 allow-scripts: 스크립트 실행 허용 allow-.. #9 - HTML 태그 - 이미지/동영상/오디오 이미지/동영상/오디오 태그 아래 태그는 body내 위치합니다. 태그 예시 서비스의 로고입니다. 태그 설명 태그 속성 의미 값 img 이미지를 불러올 수 있는 태그 srcset 브라우저에게 제시할 이미지 목록과 그 크기를 정의 px 사용 안함, 가로는 w, 세로는 x로 입력함 IE 지원 안함 sizes 미디어 조건문들을 정의하고, 특정 미디어 조건문이 참일 때 어떤 이미지 크기가 최적인지 나타낸다 IE 지원 안함 예시 ) 브라우저의 가로사이즈가 480인 경우, size에서 480px을 찾아 440px 슬롯을 선택. 440px에 맞는 480w를 찾아 이미지 적용 with 고정된 가로값 사용 src (필수) 이미지의 경로 경로 alt (필수) 이미지가 나오지 않을 경우 대체 텍스트 텍스트 audio 오디오를 .. #8 - HTML 태그 - 텍스트 글씨 관련 태그 아래 태그는 body내 위치합니다 태그 예시 순서 없는 리스트1 순서 없는 리스트2 순서 없는 리스트3 순서 있는 리스트2 순서 있는 리스트1 순서 있는 리스트3 용어 정의 용어 의미 엔터가 반영되지 않아 br태그를 사용 엔터가 그대로 반영 됨 인용문 내부 또는 외부 연결 약어 텍스트 강조 - 두께 텍스트 강조 - 하이라이팅 텍스트 강조 - 이탤릭 텍스트 의미 강조 - 두께 텍스트 구분 - 이탤릭 용어 정의 저작물의 출처 - 이탤릭 짧은 인용문 밑줄 컴퓨터 코드 키보드 입력 윗 첨자 아래 첨자 10:00 21-05-11 텍스트 영역 설정 텍스트 삭제 전, 수정 전 텍스트 추가 후, 수정 후 태그 설명 구분 태그 속성 의미 값 리스트 ul 순서가 없는 리스트 ol 순서가 있는 리스트 sta.. #7 - HTML 태그 - 컨텐츠 구분 컨텐츠 구분에 사용되는 태그 아래 태그는 body내 위치합니다. 태그 예시 헤더 내 텍스트 영역 네비게이션 영역 메인 영역 아티클 영역 제목1 섹션 영역 사이드 영역 푸터 내 텍스트 영역 010-1234-5678 태그 설명 태그 의미 header 문서의 헤더를 지칭. GNB 영역을 제작할 시 사용 nav 문서의 부분 중 네비게이션(현재 페이지 내, 또는 다른 페이지로의 링크)를 보여주는 구획 div division의 약자. 의미 없이 범위를 묶는 용도로 사용함 main 문서의 주요 컨텐츠를 지칭. 한 문서에 하나의 태그만 허용 article 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획 section HTML 문서의 독립적인 구획을 나타냄. 더 적합.. #6 - HTML 태그 -head 인라인/블록 요소 블록 요소 설명 : 가로 사이즈를 지정하지 않아도 가로 사이즈 100%를 차지하는 요소 특징 : 크기 지정 가능 배치 : 위에서 아래 블록 요소 -> 인라인 요소로 변경 아래 속성과 값을 css에 추가하여 사용 display:inline; 인라인 요소 설명 : 필요한 가로 사이즈만 차지하는 요소 특징 : 크기 지정 불가능 배치 : 좌측에서 우측 특징 : 위아래 패딩/마진 적용 불가능 인라인 요소 -> 블록 요소로 변경 아래 속성과 값을 css에 추가하여 사용 display:block; 최상단 또는 head 구역 내부에 사용되는 태그 태그 예시 이 부분에 구조를 작성해보자 태그 설명 위치 태그 속성 의미 값 최상단 !DOCTYPE html HTML5 문서임을 명시 html 문서의 범위 표.. #5 - HTML 작성 준비 HTML 작성 준비 폴더 열기 익스플로러(빨간 동그라미)를 클릭한다. 그 후 폴더 열기를 클릭해서 HTML을 작성할 폴더를 지정해준다. 파일 생성 초록 동그라미를 클릭하여 파일을 생성해준다. 나중에 도메인을 연결하면 다른 사람들도 내가 만든 사이트로 이동할 수 있게 되는데, 이때 경로에 있는 "index.html"파일을 가장 먼저 띄워준다고 한다. 자동완성 이용하기 "index.html" 문서에 "!"를 입력하고, 엔터를 치면 아래와 같이 기본 html 형식이 자동 완성된다. 추가 정보 작성하기 HTML에 구조를 작성하기 전, 아래와 같이 자신에게 맞는 정보를 입력하자. 이 부분에 구조를 작성해보자 추가 정보 입력을 위한 태그 설명 각 태그에서 사용할 수 있는 속성은 다음 글에서 설명한다. 태그 내용 !.. #4 - CSS 기본 문법 CSS 기본 문법 기본 형태 body{ background-color:red; color :white; } CSS 문법에서 선택자(body)를 입력하고, 그에 대한 속성자 (background-colod)와 값(red)을 설정한다. 여기서 선택자는 html에서의 요소를 말한다. 요소 선택 콘텐츠 텍스트 클래스는 동일 값을 여러군데 사용 가능 콘텐츠 텍스트 HTML 요소를 CSS의 속성자로 선택할 수 있다. 태그 명으로 찾기 /*--CSS--*/ p{ color : white; } 선택자에 태그명을 입력하여 선택한다. Class로 찾기 /*--CSS--*/ .contents-text{ color : white; } Class라는 속성자로 HTML에서 요소로 지정할 수 있으며, 이를 선택자로 지정할 수 있다.. #3 - HTML 기본 문법 가장 기본적인 HTML의 문법을 알아보자 HTML 기본 문법 기본 형태 내용 HTML 문법에서 대부분의 요소들은 시작 태그와 종료 태그로 작성되며 그 사이에 내용이 들어간다. 빈 태그 종종 종료 태그가 없는 형태를 볼 수 있는데, 이는 빈 태그라고 지칭한다. 속성/값 태그를 활용도 있게 사용하기 위해 속성과 값을 사용한다. 위의 의미는 아래와 같다. img : image를 삽입해라. (속성) src : source의 경로는 "파일이 있는 위치 > img > logo.png"이다. (값) alt : 이미지가 표시되지 않을 경우, "로고" 텍스트를 노출시켜라. 부모/자식 요소 태그 안에 태그를 감싸서 사용할 수 있다. 이때 상위에 있는 요소를 부모 요소라고 칭하고, 안에 있는 요소를 자식 요소라고 칭한다. .. 이전 1 2 3 4 다음
