yeji

pseudo은 '허위의, 가짜의' 뜻을 가지고 있다. css에서는 의사 클래스라고 불리우고 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용한다. 1 ) 동적 의사 클래스 (Dynamic pseudo-class) 의사 클래스 설명 :link 사용자가 아직 한 번도 이 링크를 통해서 페이지를 방문하지 않은 상태를 선택 (기본 상태) :visited 사용자가 한 번이라도 이 링크를 통해서 페이지를 방문한 상태를 선택 :hover 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 선택 :active 사용자가 마우스로 링크를 클릭하고 있는 상태를 선택 :focus 포커스를 가지고 있는 input 요소를 모두 선택 2) 상태 의사 클래스 (UI element statess pseu..

CSS는 요소를 표시하기 위해 요소별로 사각형의 박스를 생성한다. 박스가 실제 화면에서 차지하는 크기를 결정하는 요인 content : 요소의 콘텐츠가 표시되는 영역 padding : content 영역과 border 사이의 안쪽 여백 border : padding 영역과 margin 사이의 테두리 margin : border를 기준으로 다른 요소와의 바깥쪽 여백 이렇게 HTML 요소 박스는 다양한 속성에 의해 결정되며, 이를 'CSS 박스 모델(Box Model)' 이라고 한다.

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미. 사이즈를 최소화하고 서버 요청 횟수를 최소화하는 방법. 여러개의 이미지를 각각 다운 받는 것보다 한번에 다운 받은게 효과적이다. 이미지 스프라이트 기법은 백그라운드를 통해 표현 대체 문자는 IR 기법으로 표현 이미지의 위치는 background-position으로 설정 이미지의 스프라이트는 이미지 관리 및 수정이 편리함 이미지의 스프라이트는 해상도 별 이미지 관리에도 많이 쓰임

IR(Image Replacement) 기법은 이미지 대체텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지 대체 텍스트를 제공할 수 있습니다. 1) Phark Method 의미 있는 이미지의 대체 텍스트를 제공하는 경우 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 빼내어 보이지 않게 하는 방법 항목 장점 단점 스크린 리더가 읽어 줌 O 추가적인 태그 사용 안 함 O CSS ON / image off시 텍스트 안보임. O ex) .ir_pm { display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px; } 2) WA IR 의미 있는 이미지..

grid-item은 block요소로 한줄에 하나씩 배치된다. 이 요소들을 쭉 나열하고자 할 때 쓸 수 있는 게 두 가지가 있다. 1) inline-block .grid-item에 display:inline-block을 추가하면 inline을 포함하고 있기 때문에 가로 정렬이된다. inline은 텍스트처럼 쭉 나열되기 때문에! 그치만 위에 사진처럼 여백이 생긴다. 밑에 생기는 여백은 텍스트의 하단 행간에 대한 공간이 생겨버린다. inline은 다 좋지만 텍스트의 성질을 가지므로 띄어쓰기 공간과 하단 공백이 생긴다. 이걸 해결하기위해서는 1-1) 부모에 font-size:0을 준다. => 띄어쓰기공간을 없애버리기. 하지만 이 방법은 브라우저에 따라서 적용이 안될 수도 있다. 1-2) 자체 div를 이어서 작..

css 속성 중에서는 박스를 배치하는 기술이 많이 있습니다. 하지만 그 기술들 중에는 배치라는 단어와는 무관한 기술들도 많이 있습니다. 예를 들어 플로트(float)라는 속성은 '띄우다'라는 의미로, 배치와는 전혀 상관없습니다. Flex(플렉스)는 Flexible Box, Flexbox 라고 부르기도 합니다. 기존의 속성들로는 박스의 배치 순서를 변경하거나 자유롭게 바꾸는 것이 불가능했습니다. 하지만 플랙서블 박스가 등장하면서 박스 요소들을 다양하고 자유롭게 조작할 수 있게 되었습니다. Flex 레이아웃을 만들기 위한 기본적인 HTML 구조 입니다. 부모 요소인 div.container를 Flex Container(플렉스 컨테이너) 라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 ..

See the Pen wvMKoqr by yeji (@kimyeji) on CodePen. height:100%를 쓰고 싶은데 안되서 px값을 주었더니 적용이 된다. height:100%값을 적용시키게 하려면 html,body에 height:100%를 줘야한다. 왜냐하면 div의 부모인 body나 html의 height가 auto로 되어있으므로 높이의 기준으로 서로를 삼기때문. (div가 100%로 이므로 body의 높이를 기준으로 해야하는데, body는 auto이므로 div의 높이를 기준으로 삼는다)

See the Pen XWmqgOX by yeji (@kimyeji) on CodePen. 부모에게 display : table; 하고 width:100%; table-layout:fixed; 자식에게 display : table-cell; 이렇게 해주고 자식요소에게 width값을 주면 자식요소의 숫자만큼 동일하게 넓이가 나온다!.. 2개면 50% 3개면 33.3333% 4개면 25%