box-sizing 속성 box-sizing 속성은 CSS의 테두리 영역의 크기를 결정합니다. box-sizing 속성값에는 content-box와 border-box가 있습니다. 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. (기본값) border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. content-box 지정한 CSS width 및 height를 컨텐츠 영역에만 적용합니다. border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있습니다...
display 시작하기에 앞서 display 속성은 그 값에 따라서 웹페이지를 보고 있는 사용자에게 특정 요소(element)를 어떻게 보여줄지 결정됩니다. block display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 즉, block은 한 영역을 차지 하는 박스형태을 가지는 성질입니다. 그렇기 때문에 기본적으로 block은 width값이 100%가 됩니다. 그리고 라인이 새로 추가된다는 것을 알 수 있습니다. 대표적인 block 엘리먼트로 이나 , 태그 등을 들 수 있습니다. 특징 width, height, margin, padding 속성이 모두 반영이 됩니다. inline display 속성이 inline으로 지..
등장 이유 CSS가 없던 시절 HTML만 있던 시절에 기본적인 태그에 적당한 서식이 있었다. 이후에 CSS가 등장하면서 이 서식은 CSS의 기본서식이 되었다. 이 스타일은 User-Agent-StyleSheet라고 한다. 브라우저 별 User-Agent-StyleSheet 크롬 : Chromium Firefox : Gecko Safari : WebKit 하지만 각자 브라우저마다 각자의 스타일은 존재했지만 공통적인 표준이 없어 브라우저는 각자 다른 스타일들을 갖게 된다. 따라서 크로스 브라우징 이슈가 생기게 된다. 이를 위해 표준 스타일을 만들 필요가 있었다. 이게 바로 CSS Reset과 Normalize이다. CSS Reset * { margin: 0; padding: 0 } CSS Reset 은 모든..
ARIA role(역할) 특정 요소에 역할 정의, 사용자에게 정보제공, 부여한 역할 동적 변경 불가 ARIA role 속성 role="application" 동일요소x, div요소와같이 그룹역할을하는 요소로 대체 role="banner" 비슷한 의미로 사용가능👉🏻 로 사용시 1페이지에서 1개만 사용하기를 권장 role="navigation" 와 동일 role="main" 과 동일 👉🏻 1페이지 내에 1개만 사용가능하다. 본문의 주요 컨텐츠 영역 role="aside" 와 동일, 주요컨텐츠와 연관이 적은 의미를 가진 영역 role="form" 와 동일, 서버에 전송될 수 있는 콘텐츠, 폼관련 요소 모임 role="search" 검색 역할을 담당하는 서식영역, 또는 에 사용권장. role="contentin..
사용 이유 숨김 제목과 같이 일부 콘텐츠를 숨길 필요가 있다. 콘텐츠를 숨기는 방법으로는 CSS활용해 display : none, visibility:hidden 을 활용할 수 있습니다. 이러한 기술은 웹 페이지에서 보이지 않을 뿐만 아니라 스크린 리더와같은 보조 기술로도 탐색이 불가능합니다. 가. 스크린 리더 사용자에게 정보 오버로드 방지: 스크린 리더 사용자는 시각적 콘텐츠를 음성으로 변환하여 이해합니다. 따라서 너무 많은 노이즈 요소가 읽히면 콘텐츠를 이해하는 데 어려움을 겪을 수 있습니다. aria-hidden을 사용하여 불필요한 정보를 제거함으로써 사용자의 이해를 돕습니다. 나. 숨겨진 콘텐츠 제공: 일부 콘텐츠는 초기에는 보이지 않지만, 특정 상황에서 스크린 리더 사용자에게 제공되어야 할 수도..
대표적인 속성 2가지 1. float 속성 2. position 속성 float 정렬하기 위한 속성으로, 보통의 흐름(normal flow)를 벗어나 텍스트 및 인라인 요소가 그 주위를감싸는 자기 컨테이너(부모 요소)의 좌우측을 따라 배치되는 것을 지정합니다. 예를 들어 left나 rigth를 주게되면 해당 요소는 부모 요소의 왼쪽 또는 오른쪽에 배치되게 됩니다. 이처럼 float는 다른 요소의 배치에 영향을 주는 속성값입니다. float는 화면에 떠있는 블록이기 때문에 블록이 지정되어 있는 넓이와 높이가 반드시 지정되어 있어야 합니다. 이 중 하나의 속성이 빠져도 float 속성을 사용할 수 없습니다. inherit 부모 요소에서 상속함 left 요소가 자신의 포함(containing) 블록의 좌측에 ..
제목 요소 종류 h1 ~ h6로 총 여섯 가지 사용 가능하다. 숫자가 높아질 수록 하위제목이다. 사용 방식 제목 레벨 1 제목 레벨 2 제목 레벨 3 제목 레벨 4 제목 레벨 5 제목 레벨 6 [결과] 제목 요소는 블록 요소를 포함할 수 없으며 인라인 요소와 텍스트만 사용가능!! 사용 이유 잘 구성된 제목 요소는 기기에서의 정보 인식성을 높일 수 있다. 즉, SEO관점에서 좋다. 스크린 리더 사용 시 웹 페이지의 제목구조를 파악해 제목 사이의 이동 기능을 제공해주기때문에 빠르게 탐색이 가능하다. 따라서, 제목 요소는 순서대로 사용해주는 것이 바람직하다. 제목 요소가 순차적으로 사용되어야지 정보의 순서를 파악할 수 있고 구조를 파악할 수 있다. 추후 유지 보수를 위해서도 순서를 지켜주는 것이 좋다. 제목 ..
웹 표준 📜 웹에서 표준적으로 사용되는 기술이나 규칙 🔉 W3C의 토론을 통해 나온 권고안을 말함 🔉 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정 웹 표준 관련 기술 구조 : (X)HTML 표현 : CSS 동작 : Script 구조 언어 (X)HTML & XML HTML ‘HyperText Markup Language’의 약자로, 하이퍼텍스트를 표현하기 위한 마크업 언어라고 정의할 수 있다. HTML은 SGM(Standard Generalizes Markup Language)을 모체로 하여 국제 표준 기구인 ISO가 1986년에 채택한, 웹에서 사용하는 표준 마크업 언어이다. HTML은 매우 느슨한 언어이기 때문에 코드의 일관성이 떨어졌다. 태그의 운용법이나 오류..
정의 WAI는 W3C에서 웹 접근성을 담당하는 기관으로 ARIA는 RIA 환경의 웹 접근성에 대한 표준 기술 규격을 의미 ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공함. 등장 배경 1. 동적인 웹 애플리케이션 접근성 보장을 위한 지침이 부족함 2. Ajax를 통한 실시간 변경 콘텐츠와 SPA 방식의 콘텐츠 변경이 일어나는 데 스크린리더를 사용자들은 실시간으로 갱신되는 정보를 알 수 없음 3. 화면 확대 시 화면 밖으로 콘텐츠가 변경되어도 이를 파악하기가 힘듦 웹 접근성이란? 웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것 웹 접근성 기대 효과 1. 장애인, 고령자 등 다양한 사용..
가상 클래스(:pseudo-class) 화면의 특정 요소에 커서가 향했을 때 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀주는 역할 가상 요소(:pseudo-element) 실제로 존재하지 않는 요소를 만들어 주는 역할 가상 클래스 종류 :hover 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경 이 링크를 가리켜보세요. a:hover { background-color: gold; } :active 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경 이 링크는 클릭하는 동안 색이 빨갛게 됩니다. a:active { color: red; } :focus 해당 요소에 포커스되면 요소의 스타일 변경(마우스, 키보드 해당) .blue-input:focus { backgroun..
