근혁 study 공부정리

속성 선택자 속성 예시 설명 [name] a[href] a태그 속성 중에 href가 있으면 선택 [name="value"] a[href="#header"] a태그 href 속성의 값이 '#header'이면 선택 name~="value" a[href~="web"] a태그 href 속성의 값이 'web'을 포함한 요소 선택 [name|="value"] a[href|="web"] a 태그 href 속성의 값이 'web'이거나 'web'으로 시작하는 요소 선택 [name^="value"] a[href*="web"] a 태그 href 속성의 값이 'web'이 포함되어 있는 태그를 선택합니다. [name$="value"] a[href$="com"] a 태그 href 속성의 값이 'com'으로 끝나는 태그를 선택합니..

Flex Flex는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식이다. Flexbox에서 사용하는 속성은 부모요소와 자식요소로 나눠진다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의한다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요하다. flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order 속성 설명 ali..

CSS선택자 css에서 선택자는 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들에게 스타일을 적용할 수 있다. css선택자에는 여러 방법이 있다 우선 기본 선택자와 계층 선택자를 알아보자 기본 선택자 속성 예시 설명 태그 선택자 div {color: #fff} div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 클래스 선택자 .class {color: #fff} class 클래스를 선택하여 글씨 색을 하얀색으로 변경합니다. 아이디 선택자 #id {color: #fff} id 아이디를 선택하여 글씨 색을 하얀색으로 변경합니다. 그룹 선택자 div, p, {color: #fff} div 태그와 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 전체 선택자 * {color: #fff} 전체..

벤더 프리픽스란? 벤더 프리픽스란 브라우저별로 따로 놀던 CSS3의 속성을 잡아주기 위해서 사용되기 시작된 프리픽스는 마크업시 CSS의 class앞에 -moz-, -webkit-, -o-, -ms-라는 각 브라우저에서 판독이 가능한 접두사를 붙여서 해당 브라우저에서 인식할 수 있게 하는 것을 지칭하고 있다. 표준 속성을 우선해야 하므로,벤더 프리픽스가 있는 속성은 속성 앞쪽에 표시하는 것이 원칙이다 웹 브라우저 제조사별 벤더 프리픽스는 다음과 같다. 모질라 파이어폭스를 제외한 나머지 신형 데스크탑,모바일 브라우저는 모두 -webkit-을 사용한다고 보면 되며 웹킷 기반의 엔진을 공통으로 사용하기 때문에 벤더 프리픽스를 따로 붙일 필요가 없다. 벤더 프리픽스 웹 브라우저 예 -webkit- 구글크롬 -we..

Float란? float 속성은 사전적 의미론"뜨다"라는 의미를 가지고 있으며,웹 페이지에서는 컨텐츠를 가로로 나열하는데 자주 사용한다. 또한 글의 본문 안에서 이미지 혹은 레이아웃을 잡는데 자연스럽게 삽입할때 사용한다. float:left로 인한 영역깨짐 해결방법 CSS3에서 floa:left로 레이아웃을 잡게 되었을 때, 영역 깨짐(즉, Height 값이 사라져0이 되는 현상)이 발생한다. 이 에러를 잡기 위한 방법에는 4가지가 있다. 깨지는 영역에 똑같이 Float:left를 사용 모든 박스에 float: left를 사용해야 하며 구조가 복잡해 지면 어디에 float: left를 넣어야 할지 알기가 어려워지므로 추천 X 깨지는 영역에 Clear:both를 사용 위치를 잡을 수 있으나 구조가 복잡할 ..

HTML 태그를 통해서 표현하는 방법 Img 태그 이미지의 의미가 있을 때 img태그를 사용한다. Alt태그를 이용해서 대체 문자를 적어야 한다. { } CSS 속성을 통해서 표현하는 방법 Background 속성 이미지가 의미가 없을 때 background 속성을 사용한다. 의미가 없기 때문에 대체 문자를 적을 필요가 없다. { -background: url(이미지 주소) center top repeat-x; -background: url(이미지 주소) no-repeat 9px(가로) 8px(세로) } 이미지 스프라이트 기법 여러 개의 이미지를 하나의 이미지로 합쳐서 관리 위 기법을 사용하면 이미지 관리가 용이하며 웹페이지의 로딩 시간 및 용량을 줄일 수 있다. 위 기법으로 이미지를 넣을 때는 웹표준 ..

ir 효과란? 몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적이 있기 때문에 만약 시각장애인이 이 사이트를 이용할 경우 텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없다. 그래서 이미지에 텍스트를 붙여준다. 또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그라운드로 넣어주는 이미지라고 할지라도 텍스트를 써주는 것이 좋다 이런걸 ir효과라고 한다.> .ir_pm (Phark Method) 의미있는 이미지의 텍스트를 제공하는 경우에 사용 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 (-9999px만큼 내어쓰기)빼내어 보이지 않게 하는 방법 ir_ pm { display: block;..