![]()
box-sizing 속성 1. box-sizing 속성 - 박스 모델에서 요소의 크기를 계산하는 방법을 제어하는 데 사용되는 속성입니다. 2. box-sizing의 주요 값 - content-box (기본값) - 요소의 크기를 요소의 콘텐츠 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠의 크기만을 고려하며, padding 및 border은 요소 크기에 추가됩니다. - border-box - 요소의 크기를 요소의 테두리(border)를 포함한 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠와 padding, 그리고 border까지 고려한 크기가 됩니다. - initial - 기본값으로 설정합니다. - inherit - 부모 요소의 속성값을 상속받습니다. 3. 예..
![]()
HTML 규약 및 관례 1. HTML 규약 및 관례 - HTML에는 다양한 규약과 최선의 관례가 존재합니다. - 이는 웹 페이지의 명확한 구조 및 내용을 정의하고, 간편한 유지 보수가 가능하며, 웹 접근성 및 크로스 브라우징 문제를 최소화할 수 있습니다. 2. 문서 형식 선언 - HTML 문서의 시작 부분에 적절한 문서형식 선언을 추가해야 합니다. (HTML5 기준) 3. 문서 구조 - HTML 문서는 일반적으로 다음과 같은 구조를 따릅니다. 3. 유요한 HTML - HTML 문서는 유효한 마크업을 가져야 합니다. - W3C Markup Validation Service와 같은 도구를 사용하여, 문서를 유효성 검사할 수 있습니다. 4. 의미 있는 태그 사용 - HTML5에서는 의미 있는 태그를 사용하여,..
![]()
HTML SEO(검색 엔진 최적화) 기본사항 1. HTML SEO 기본사항 - HTML을 사용하여 웹 페이지를 작성할 때, SEO(검색 엔진 최적화)를 고려하는 것은 중요합니다. - 다음으로는 HTML을 사용한 웹 페이지의 SEO 기본사항입니다. 2. 의미있는 HTML 요소 사용 - 웹 페이지의 구조를 설명하기 위해서는 의미 있는 HTML 요소를 사용해야 합니다. - , , 등을 사용하여, 페이지의 구조를 검색 엔진에 명확하게 전달해야 합니다. 3. 제목 태그 사용 - 태그를 사용하여, 페이지의 제목을 정의해야 합니다. - 이 제목은 검색 결과에서 표시되며, 페이지의 주요 주제를 나타내야 합니다. 웹 페이지 제목 4. 메타 태그 활용 - 태그를 사용하여, 페이지의 메타 데이터를 제공해야 합니다. - de..
![]()
HTML 유효성 검사 1. HTML 유효성 검사 - HTML 문서의 유효성 검사는 문서가 웹 표준에 부합하는지 확인하는 과정임 - 다양한 온라인 도구 or 브라우저의 내장 도구를 사용하여, 유효성 검사를 수행할 수 있음 2. 유효성 검사의 목적 - 크로스 브라우징 지원 - 모든 브라우저에서 일관된 방식으로 페이지를 표시하려면, 표준을 준수해야 함 - 웹 접근성 - 장애인 or 특정 기기를 사용하는 사용자에게 웹 페이지를 쉽게 이해하고 사용할 수 있도록 지원하기 위해 웹 접근성 표준을 준수 - SEO (검색 엔진 최적화) - 검색 엔진은 웹 페이지를 크롤링하고 색인화할 때, 표준을 준수하는 페이지를 선호함 ※ 크롤링 : 웹 페이지에서 정보를 추출하는 프로세스 3. 유효성 검사 방법 - HTML 문서의 유표..
![]()
NHN CSS 컨벤션 1. css 속성 선언 순서 (2012년 기준) - 속성 선언 시, 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 순서로 선언 - 관련 속성은 대표되는 속성 다음으로 선언하며, 다음과 같은 표에 표기된 의미 순서대로 선언 순서 의미 대표되는 속성 1 레이아웃 display visibility overflow float clear position top right bottom left z-index 2 BOX width height margin padding border 3 배경 background 4 폰트 font color letter-spacing text-align text-decoration text-indent vertical-align white-sp..
![]()
role 속성 1. role 속성 - 웹 페이지의 접근성을 향상시키기 위해 사용되는 속성 - 해당 요소의 역할(role)을 정의하며, 스크린 리더 등의 보조 기술을 사용하는 사용자에게 콘텐츠를 전달하는 데 도움을 줌 2. 예시
![]()
CSS 기술 순서 1. mozilla 에서 제안한 CSS 속성 기술 순서 - #1. display - #2. list-style - #3. position - #4. float - #5. clear - #6. width / height - #7. padding / margin - #8. border / background - #9. color / font - #10. text-decoration - #11. text-align / vertical-align - #12. white-space - #13. other text - #14. content
![]()
시맨틱 웹 (Semantic Web) 1. 시맨틱 웹 (Semantic Web) - 웹 페이지의 구조와 의미를 명확하게 설명하여, 웹 콘텐츠를 이해하고 해석하는 것을 돕는 웹 개발의 접근 방식 - 이를 통해, 검색 엔진 or 웹 에이전트 등이 웹 페이지의 내용을 이해, 분류 등에 효율적 - 또한, 시각 장애인 or 보조 기술을 사용하는 사용자들에게 웹 콘텐츠를 더욱 쉽게 접근 가능하게 함 2. 시맨틱 웹 구조 요소 설명 웹 페이지 or 섹션의 헤더를 정의 내비게이션 링크를 정의 문서의 주요 콘텐츠를 정의 문서의 섹션을 정의 독립적인 콘텐츠를 정의 웹 페이지 or 섹션의 푸터를 정의
![]()
엔티티 (Entity) 1. 엔티티 (Entity) - HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋 2. 엔티티의 종류 엔티티 문자 엔티티 명 16진수 엔티티 숫자 (띄어쓰기) > > & & & " " " ' ' '
![]()
콘텐츠 카테고리 1. 콘텐츠 카테고리 - HTML5 부터 비슷한 특징을 가진 요소끼리 묶어 7가지 카테고리로 세분화함 콘텐츠 설명 메타데이터 콘텐츠 (Metadata Content) 문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소 플로우 콘텐츠 (Flow Content) 웹 페이지상에 메타데이터를 제외하고 거의 모든 요소. (보통 텍스트 or 임베디드 콘텐츠를 포함) 섹션 콘텐츠 (Section Content) 웹 문서의 구획(Section)을 나눌 때 사용 헤딩 콘텐츠 (Heading Content) 섹션의 제목(Heading)과 관련된 요소 프레이징 콘텐츠 (Phrasing Content) 문단에서 텍스트를 마크업 할 때 사용 임베디드 콘텐츠 (Embedded Content..
![]()
드롭다운 목록 태그 1. select 태그 - select 태그를 사용해 드롭다운 목록을 생성함 - select 태그에는 추가 속성이 존재 - size 속성 : 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정 - multiple 속성 : 드롭다운 메뉴를 중복 선택이 가능함 (ctrl 키를 사용) 2. option 태그 - option 태그로 드롭다운 목록에 표시되는 옵션들을 생성함 - option 태그에는 추가 속성이 존재 - value 속성 : 옵션을 선택 했을 때, 서버로 넘겨질 값을 지정 - selected 속성 : 화면에 표시될 때, 기본적으로 선택되어 있는 옵션을 지정 메뉴판 커피 메뉴 아메리카노 카페 라떼 카푸치노 바닐라 라떼 녹차 라떼 3. optgroup 태그 - 옵션끼리 그룹 지정 - 이..
![]()
input 태그의 다양한 속성 1. autofocus 속성 - 폼의 요소 중 원하는 요소에 입력 커서를 표시함 - 웹 요소에 들어가면, 바로 autofocus를 입력한 요소에 마우스가 클릭된 상태로 열림 이름 비밀번호 2. placeholder 속성 - 입력란에 힌트 내용을 표시함 - 사용자가 어떤 내용을 입력해야 하는지 알려 줄 경우에 사용 - 사용자가 내용을 입력하면 placeholder로 입력한 텍스트가 사라짐 전화번호 3. readonly 속성 - 읽기 전용 필드 생성 - 사용자가 입력하지 못하고 읽게만 할 수 있음 영업시간 4. required 속성 - 필수 필드 지정 - 이 속성을 사용하면, 무조건 입력해야 넘어가게 끔 설정할 수 있음 신청자 이름 신청 5. min, max, step 속성 -..
![]()
input 태그 1. input 태그 - 입력 항목 생성 - 태그 안에 있는 type 속성을 이용해 폼 요소를 구분함 - id 속성을 이용하여 폼 요소를 구분할 수 있음 2. text 속성 - 텍스트 필드 생성 - 다음 속성들은 텍스트 필드에서 사용할 수 있는 속성값임 속성 설명 name 텍스트 필드를 구별하는 이름을 설정 size 텍스트 필드의 길이 지정 value 텍스트 필드 부분에 표시될 내용 입력 maxlength 텍스트 필드에 입력 가능한 최대 문자 개수 지정 3. password 속성 - 비밀번호 입력란 생성 - text 속성과 달리 입력한 내용이 * 또는 · 으로 표시됨 5. 그 외의 속성값 - search : 검색 상자 생성 - url : URL 입력란 생성 - email : 메일 주소 입..
![]()
폼 관련 태그 1. form 태그 - 폼을 생성함 ※ 폼(form) : 아이디와 비밀번호 또는 로그인 버튼, 회원가입 창 등 웹 사이트로 정보를 보낼 수 있는 요소들 - 폼 요소 - form 태그는 여러 속성을 통해 서버로 자료를 넘김 - method 속성 : 사용자가 입력한 내용을 서버 쪽으로 넘기는 방식을 설정함 (속성 값으로 get과 post가 존재) - get : 주소 표시줄에 사용자가 입력한 내용이 그대로 표시됨 (256byte~4096byte 까지의 데이터만 가능) - post : 사용자의 입력을 표준 입력으로 전달됨 (데이터 길의 제한을 받지 않고 입력 내용이 표시되지 않음) - name 속성 : 폼의 이름을 지정 - action 속성 : 내용을 처리해 줄 서버 상의 프로그램을 지정 - ta..
![]()
미디어 쿼리 1. 미디어 쿼리 - 웹 페이지가 표시되는 장치에 반응하도록 하여 반응형 웹을 구현할 수 있는데, 이때 사용하는 것이 미디어 쿼리임 - 미디어 쿼리는 두 가지 방법으로 사용 가능 - @media 규칙 - media 속성 2. @media 규칙을 이용해 미디어 쿼리 사용하기 Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit........... - max-width: 800px는 화면 너비가 800이 되기 전까지의 설정 (최대 너비) - min-width: 800px는 화면 너비가 800이 될 때부터의 설정 (최소 너비) 3. media 속성을 ..
