HTML & CSS

HTML이란? > Hyper Text Markup Language 프로그래밍 언어 웹페이즈를 만들때 사용되는 언어 웹사이트들이 모두 html 언어를 이용해서 만들어짐 hyper text : 텍스트 그 이상, 텍스트를 초월하는 인터넷 탐색하다 보면 링크라고 부르는것들.

html 버전이 업그레이드되면서 태그가 추가되기도 삭제되기도 함 현재 태그 갯수는 대략 100여개 넘음 대부분의 웹페이즈들은 실제 20~30여개의 태그만 사용한다 HTML elements reference HTML5 Doctor w3schools 태그 레퍼런스들 참조

콘텐츠모델 HTML5에서는 HTML 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들 있음 이런 규칙들을 그룹화시켜놓은것이 콘텐츠 모델 총 7개 존재 각각의 HTML 요소는 하나 또는 여러개의 콘텐츠 모델에 속함 비슷한 성격의 요소들끼리 그룹화되어있음

CSS Cascading Style Sheets cascading : 연속적으로 계속되는 Style Sheets: 스타일 규칙을 정의하는것 css는 html을 꾸며주는 언어 html이 웹페이지의 정보를 표현, css는 html을 보기 좋게 디자인하는 표현용 언어 css

속성 - 정의와 구문 css속성은 종류가 굉장히 많고 계속 업데이트되고 있다 실무자들이 가장 많이 참고하는 사이트 css속성을 정의하는 w3c에서 제공하는 사이트이므로 가장 정확 간단하게 스펙과 예제를 확인하는데 용이 개발적 버그나 추가적인 스펙에 대해서 확인하

속성-typography 타이포그래피의 구조 Technology라는 문자열을 기준으로 소문자 x를 기준으로 그 밑의 기준점 라인이 baseline 소문자의 문자열 크기 ex 대문자와 소문자 중 아래로 뻗어나가는 문자열들의 영역의 크기 em 소문자 x를 기준으로 bas

속성-display display 속성 요소의 rendering box 유형을 결정 html요소는 블록레벨요소와 인라인 레벨 요소로 나뉜다. css의 display속성을 이용하면 화면상에서 블록요소를 인라인요소처럼 보여줄수도 있고 반대로 인라인 요소를 블록요소처럼 보여

미디어쿼리 소개 미디어쿼리는 반응형 웹 사이트를 제작하기 위해서 반드시 필요한 내용 Media Queires 각 미디어 매체에 따라 다른 스타일 시트를 적용할 수 있게 만드는것 여기서의 미디어 매체 : 모니터와 같은 스크린 매체, 프린트 매체, 스크린 리더기 등 즉,

웹 접근성 학습목표 웹페이지를 제작할때 어떻게 접근성을 준수해야 하는지 알아본다. 웹 접근성 지침에 따라 실무에서 접근성을 어떻게 준수해야 하는지 숙지한다. 장애환경 : 웹 접근성을 준수해야 하는 이유를 알아본다. 웹 접근성 지침 : KWCAG의 지침에 따른 24가지

CSS 리셋 크로스브라우징이란? Cross Browsing : 어떤 웹 브라우저를 써도 화면이 똑같이 나오고, 브라우저에 따라 입력과 사용에 문제가 생기지 않음 마크업 원칙 웹 표준, 웹 접근성, 시멘틱 마크업, 크로스브라우징 브라우저마다 같은 코드여도 해석하는

IR 기법 IR 기법이란? Image Replacement 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는것 웹 접근성 1. 적절한 대체 텍스트 제공 - 마크업으로 대체 텍스트 제공 참고 이미지 태그에는 반드시 alt 속성을 사용해서 대체 텍스트를

float 해제 float의 특성 float이 적용된 요소는 그 흐름에서 벗어나서 레이아웃 상 띄워지게 된다. 주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있다. float으로 임의의 요소를 왼쪽/오른쪽으로 배치하려고 하지만 float의 특징때문에 주변 요소들

레이아웃 소개 레이아웃의 사전적 의미 책이나 신문, 잡지 따위에서 글이나 그림 따위를 효과적으로 정리하고 배치하는 일. 이처럼 웹에서 디자인이 된 웹페이지의 구성 요소들을 효과적으로 정리하고 배치하는 일을 layout이라고 부른다. 레이아웃은 배치 구성에 따라서 다

메뉴 소개 메뉴: 내비게이션이라고도 불림 내비게이션은 웹 사이트 내에서 제공되는 정보를 쉽게 찾을 수 있도록 도와주는 역할을 함. 사용자가 웹 사이트에서 제공되는 페이지를 잘 모를 수 있음. 그렇기 때문에 웹 사이트에서 제공하고 있는 다양한 페이지들을 한눈에 보기 좋게

탭 소개 탭 : 사전적 의미로 색인표, 식별표라는 뜻 색인은 목록과 같은 의미로 쓰인다 데이터를 기록할 경우 그 데이터의 이름, 크기 등의 속성과 그 기록 장소등을 표시하는것 즉 참조용의 데이터를 색인표 또는 인덱스라고도 부른다. 탭 UI의 특징 여러 문서 또는 패널

이미지 목록 소개 Image List란? thumb nail List라고도 불린다 섬네일의 사전적 의미 : 엄지손톱, 작은 물건 인터넷에서는 작은 크기의 견본 이미지를 가르켜 섬네일이라고 부른다. 사용 예시 네이버 메인화면 네이버 영화 사이트 네이버 TV 사이트 이

표 소개 Table이란? HTML에서 테이블은 표를 가리킨다. 표는 어떤 내용을 일정한 형식과 순서에 따라 보기 쉽게 나타낸것. 표 안에 제목과 내용으로 구성해야하기 때문에 다른 마크업 태그들보다 사용방법이 좀 더 복잡 표 형태의 UI이더라도 다른 태그로 의미있는

팝업 소개 Popup 이란? 웹페이지에서 굉장히 많이 볼 수 있는 UI >특정 영역의 위치에, 특정 사이즈의 레이어(창)를, 특정 시점에 노출 Popup = 새창. 온전한 새로운 웹페이지 Modal = 레이어 팝업. Alert = 알림/시스템 팝업. 원래 경고, 알

폼 소개 웹 서버의 정보를 주고받는 형식의 UI를 ``태그를 이용해서 작성했다고 해서 Form UI라고 부른다. 다양한 데이터를 받을 수 있는 태그들 존재. 이런 태그들을 폼과 관련된 요소들이라고 해서 폼 요소/폼 태그라고 부른다. 여러 브라우저에서는 동일한 폼 요

반응형 웹 소개 반응형 웹이란 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹 페이지. 하이퍼텍스트 생성 언어 버전 5(HTML5) 시대가 도래됨에 따라 기능 완성 형태의 새로운 마크업 언어의 등장으로 스마트한 웹페이지 구현이 가능하다. 즉 하