📋 상대 단위란? 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위입니다. 대표적으로 em, rem, %, vw, vh 등이 대표적인 css의 상대 단위입니다. 📋 절대 단위란? 어떤 상황에서든 항상 고정된 길이를 나타내는 단위입니다. 대표적으로 px 이 있습니다. ✔ em em은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미합니다. 여기서 기준이 되는 값이란 현재 스타일 지정 요소의 font-size 값을 의미합니다. 즉 현재 요소의 font-size 값이 16px이라면 2em은 32px을 의미합니다. .content{font-size: 16px;} .content{ font-size: 1.5em; /* 24px */ margin: 2em; /* 32px */..
📋 크로스 브라우징(cross browsing) 이란? 웹페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말합니다. ✔ 크로스 브라우징을 하는 이유 크롬, 익스플로러, 파이어폭스, 웨일, 사파리 등 여러가지 브라우저들이 존재하는데 이 브라우저 들은 각각의 랜더링 엔진이 다르기 때문에 크로스 브라우징이 필요합니다. ✔ 브라우저 종류와 점유율 브라우저에 대응할 때 가장 점유율이 높은 브라우저부터 맞추는 것이 좋습니다. 1위는 크롬, 2위는 사파리, 3위는 파이어폭스 등이 있습니다. 점유율 사이트 : https://gs.statcounter.com/
📋 시맨틱 태그(Semantic Tag) 란? semantic은 '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다. ✔ 시맨틱 태그의 장점 1. 검색엔진최적화(SEO) 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 검색엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해준다. 2. 웹접근성 일반적인 브라우저에서는 차이가 없지만 시각장애인을 위한 웹서핑 프로그램 등과 같은 환경에서는 웹접근성을 향상시켜준다. 3. 유지보수 많은 div태그의 사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하며 특성에 맞는 작업을 ..
✔ required form 태그 안에서 빈값으로 submit 했을 때 경고창을 띄웁니다. ✔ placeholder input 박스 안에 입력 형식에 대한 힌트를 제공 합니다. ✔ autofocus 페이지 로드 시 입력 필드에 자동으로 커서가 이동 됩니다. ✔ autocomplete 자동완성 기능 사용 여부를 결정합니다. < input type="text" autocomplete..
요소의 동작 방식은 type 특성에 따라 달라지므로 각각의 유형별 type을 지정 해야합니다. 특성을 지정하지 않은 경우, 기본 값은 text 입니다. ✔ type="text" 글을 입력 할 때 사용합니다. ex) ✔ type="password" 입력한 글이 화면에 안보이도록 숨기는 역할을 합니다. 비밀번호를 입력 할 때 많이 쓰입니다. ex) ✔ type="submit" form태그롸 함께 쓰입니다. form태그 내부에 있어서 클릭하게 되면 데이터 값을 서버로 전송 하게 됩니다. ID : PW : ex) ID : PW : ✔ type="radio" 버튼을 라디로 옵션 박스로 만드는 것입니다. 여러..
display : flex 속성은 하나의 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex 속성이 적용된 container가 부모 요소인 flex container 가 되고, 하위 요소인 item은 자식 요소인 flex item 이라고 부릅니다. ✔ flex container 속성 flex-direction, flex-wrap, justify-content, align-items, align-content ✔ flex item 속성 flex, flex-grow, flex-shrink, flex-basis, order ✔ flex-direction item 요소들의 방향을 결정 하는 속성입니다. .container { flex-directi..
display 속성은 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나입니다. ✔ display: block; display 속성 값이 block 인 요소는 해당 라인의 모든 너비를 차지합니다. ex) , , , , , ... ✔ display: inline; display 속성 값이 inline 인 요소는 해당 라인 전체가 아닌 해당 HTML 요소의 내용만큼 차지합니다. ex) , , , , ... ✔ display: inline-block; display 속성 값이 inline-block 인 요소는 해당 요소 자체는 inline 요소처럼 동작합니다. inline 요소에서 불가능하던 width 와 height 속성 지정 및 margin 과 padding 속성 지정이 가능해집니다. ✔ dis..
