I am 97

HTML, table 의 모든 것 , 표를 만들자

table 태그 테이블을 구성하는 최상위 부모태그 tr 태그 하나의 행을 표현 , th,td 태그 등 사용가능 tr의 태그 자식요소는 th td 이외의 태그가 없으나 th, td 이외의 태그가 포함되는것은 무방. td 태그 행을 구성하는 열값을 의미 테이블 테두리선을 임시적으로 지정, CSS에서 더 자세히 공부할 것이다. th 태그 굵고, 가운데 정렬하는 tr태그의 자식태그. 항목값이 아닌 항목을 구분하는 속성명임을 명시함으로 검색 효율을 증대시킴. th 태그의 scope 속성 th 의 속성을 지정함으로서 개별 항목에 대한 또는 열에 대한 방향에 대한 데이터를 대표하는 속성임을 부가적으로 표현함. 행에 대한 방향 데이터를 대표. 열에 대한 방향 데이터를 대표. th, td 의 셀 병합 속성 colspan..

Developer/HTML_CSS 2024.04.09

HTML,ol 태그와 ul 태그 list 작성

ol 태그 ol 태그는 순번이 있는 글머리 항목. type 와 start 속성 지정이 가능 . 자식으로는 li 태그 , li 이외에 직접 올 수 없으나 li 의 또 자식 태그로 다른 태그 설정가능 li 태그는 기본적으로 들여쓰기가 적용 ul 태그 ul 태그는 순번이 없는 글머리 항목 자식으로는 li, 이외에 직접올 수 없으나 li 의 또다른 자식 태그로 다른 태그 설정 가능 li 태그는 기본적으로 들여쓰기 적용 list으 중첩 , 리스트 하위를 설정하는 경우 li 태그 이외에 다른 태그가 올 수 없음. li 의 자식태그로 다른 태그가 와야함의 주의. dl 태그 용어 또는 주제의 설명 형식으로 주제를 정하고 dd , dt 태그가 자식 태그. 다른 태그는 dd,dt 의 자식 태그로 사용 가능. dd 태그는 ..

Developer/HTML_CSS 2024.04.09

HTML , div 와 span

-body 문서 내의 각각 영역 세션을 구분하기 위해 사용. 구역들을 나누는 태그. 영역들을 그룹화 하는 목적을 지님. -블럭 레벨 요소 -텍스트에 크기조절 , 좌우간격, 컬러 등 조절에 주로 사용. 영역을 그룹화 하는 목적을 지님. -인라인 레벨 요소 div 의 구체화 ,시멘틱 구조 태그 다수의 동일 div 태그 사용과 중첩으로 인해 코드 가독성이 떨어짐, 이를 보완하기위해 div와 동일한 기능을 하되 영역에 따른 고유한 명칭을 부여함으로 구저적인 가독성과 검색 엔진의 데이터 추출 효율성을 증대시킴. : 페이지나 문서의 상단에 배치하여 주제나 검색, 머리말등을 표시 및 그룹화. : 페이지나 문서의 주요 네비게이션(메뉴) 링크를 그룹화. : 페이지 본문 내용들을 그룹화. : 일반적으로 main 내부나 사..

Developer/HTML_CSS 2024.04.09

HTML ,text 문단 관련 태그

이전에 블럭 레벨 요소와 인라인 레벨 요소를 알아야 한다. 블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소. 이 한 줄을 차지한다는 의미는 너비가 100%라는 것을 뜻함. 따라서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 "줄넘김"이 됨. 블록 레벨 요소는 인라인 요소에 중첩될 수 없음. 그러나 블록 레벨 요소는 다른 블록 레벨 요소에 중첩될 수 있음. 인라인 레벨(inline-level) : 줄을 차지하지 않는 요소. 브라우저같은 화면에 표시되는 컨텐츠만큼 영역을 차지하고, 나머지 공간에 다른 요소가 올 수 있음. 웹 표준 유효성 검사 https://validator.w3.org 태그 작성 규칙 1> 모든 태그는 소문자로 작성하는 것이 원칙..

Developer/HTML_CSS 2024.04.08

HTML 구조와 형태

HTML 그게 뭔데 ? - 웹(Web)에서 클라이언트(Client)에게 보여 주는 화면 구성의 기반이 되는 언어로써 “” 사이에 마크업 태그문자를 삽입하여 웹페이지의 속성이나 화면 출력 등의 기능을 표현. 확장자의 경우 기본적으로 “html"을 사용하나 3글자의 확장자만을 허용하는 시스템(유닉스 계열)과의 호환성을 위해 “htm”으로 표기 가능하며 이는 이식성에 유리. HTML 문서는 일반적으로 시작태크와 종료태그로 구성되나, 종료태그가 존재하지 않는 태그도 존재. HTML 문서의 기본 구조 형태 1. DTD(Document Type Definition) 선언 : 브라우저가 문서 종류에 따른 정확한 해석을 위해 HTML 버전 정보 명시. 2. html 태그 : html 태그의 속성(lang) 명시를 통한..

Developer/HTML_CSS 2024.04.08

HTML 단축키

단축키는 따로 변경, 저장이 가능하나 주로 사용하는 것은 자연스럽게 익히도록 하자. 주석 : ctrl + / 화면 확대/ 축소 : ctrl + +/- 한줄 복사 : 드래그 따로 없이 ct rl + c / ctrl + v 줄단위 복사 alt + up/down 줄단위 이동 alt + up / down 한줄 삭제 ctrl+ shift + k 연속 수직 커서 ctrl alt up/down 비연속 수직 커서 alt + 클릭 단어별 변경 ctrl + shift + L 아랫줄 삽입 ctrl + Enter 윗줄 삽입 ctrl + shift + Enter 자동완성 기능 / 어시스트창 활성화 ctrl + space 실행 alt + L + O 저장 ctrl + S

Developer/HTML_CSS 2024.04.08

HTML 의 시작 , VSCODE 설치

vscode 설치 테마설정 보기. -관리 - 테마 - 색테마 확장 탭에서 다운로드 받기 ( Ctrl + Shift + X) 1) 한글 확장팩 다운로드 , 실행 검색어 : korean / 실행 : 다운로드 후 오른쪽 하단 Restart Now 클릭 2)open in browser 다운로드 -HTML 파일을 바로 브라우저로 열고 싶을 때 이용. -실행 : Alt + B 3)Live server 다운로드 -코드 수정시 매번 새로고침 해야하는 번거로움을 해소. 미리보기를 제공. -저장을 해야지만 미리보기를 제공. 4)Auto Close Tag / Auto Rename Tag 다운로드 -태그를 자동으로 닫음 / 태그명 변경시 자동으로 쌍으로 이루어진 태그가 함께 변경. 5) tabout 다운로드 - 이클립스 처럼..

Developer/HTML_CSS 2024.04.08
728x90