웹 접근성 점검하기 http://validator.w3.org/ URL 과 실제 html파일을 가지고 점검을 수행합니다. Validate by File Upload탭 클릭 >> 02.html파일을 선택 후 >> Check버튼 클릭

Media Query(미디어 쿼리) 디바이스 사이즈에 따라 화면을 다르게 표현하는 방식 스크린사이즈(뷰포트), 방향 또는 해상도에 따른 조건에 맞춰 페이지에 특정Style Sheet를 지정 합니다. 스크린사이즈, 해상도등의 조건에 따라 CSS 코드를 분기하여 최적화된 UX(User Experience) 제공하게 되는 것입니다. 웹페이지가 사용자 화면 해상도에 따라 페이지의 내용을 유연하게 바꾸어주게 됩니다. Media Queries Example 화면에 표시할 때는 산세리프 글꼴을 사용하고, 인쇄할 때는 세리프 글꼴을 사용하도록 2개의 미디어 유형에 따라 각각 정의된 문서를 만들 수 있습니다.

리스트 순서 있는 리스트(Ordered Lists)와 순서 없는 리스트(Unordered Lists)로 구분 순서를 나타내는 번호와 내용, 글머리 기호 등으로 리스트를 표현합니다. 동일한 형태의 내용을 나열할 때 사용 순서 없는 리스트(Unordered Lists) 태그 사용 어벤져스 슈퍼 히어로 캡틴 아메리카 아이언맨 토르 헐크 호크아이 블랙 위도우 순서 있는 리스트(Ordered Lists) 태그 사용 어벤져스 슈퍼 히어로 캡틴 아메리카 아이언맨 토르 헐크 호크아이 블랙 위도우 type속성 type 속성, list-style-type속성을 이용하면 marker 부분을 바꿀 수가 있습니다. 마커(marker) 리스트의 유형으로 모양, 숫자, 이미지 등 설정할 수 있습니다. type마커설명disc●원형s..

border (테두리) 요소의 주변 테두리를 뜻하는 스타일 radius, width, color, style속성을 지정할 수 있습니다. border-width 프로퍼티 border-color 프로퍼티 border-style 프로퍼티 border 프로퍼티

margin - 바깥쪽 여백 관련 프로퍼티바깥쪽 여백을 설정하는 속성 프로퍼티 설명 padding-top 안쪽 위쪽 패딩 설정 padding-right 안쪽 오른쪽 패딩 설정 padding-bottom 안쪽 아래쪽 패딩 설정 padding-left 안쪽 왼쪽 패딩 설정 margin/padding 프로퍼티 값· 한꺼번에 박스 안쪽 여백의 각 방향의 영역을 지정합니다.· 속성값을 1개 ~ 4개까지 각각 표시하여 지정합니다.· 길이나 백분율로 지정 가능합니다. 값 갯수 설명 값 1개 네방향 모두 동일 값 2개 위, 아래 여백은 첫 번째 값, 오른쪽, 왼쪽 여백은 두 번째 값 값 3개 위는 첫 번째 값, 오른쪽과 왼쪽은 두 번째 값, 아래는 세 번째 값 값 4개 위, 오른쪽, 아래, 왼쪽의 순서

박스 모델의 규격 엘리먼트를 문서에 배치하기 위해서는 margin, padding 그리고 border 속성으로 구성된 Box Model을 알고 있어야 합니다. 구성 구분설명여백 (margin)부모 항목과 경계 사이의 간격 바깥쪽 여백 항상 투명한 배경경계 (border)블록의 외곽 경계선 테두리 두께 요소의 border프로퍼티로 배경 지정채워넣기 (padding)경계선와 내용(content) 사이의 간격 안쪽 여백 요소의 background프로퍼티로 배경지정내용 (content)HTML 문서의 실제 내용 요소의 background프로퍼티로 배경지정 박스 모델 관련 프로퍼티 속성속성값의미width숫자 또는 백분율너비, 높이height숫자 또는 백분율너비, 높이floatleft, right, none위치ma..