Programming/CSS 썸네일형 리스트형 [CSS] 특정 아이폰 사파리 브라우저 text-overflow:ellipsis 불가 현상 작업 중 발견 된 현상인데...특정 아이폰 사파리 브라우저에서만 text-overflow:ellipsis 가 적용되지 않는 문제가 발생했다...맥에다 아이폰을 연결해서 디버깅해봐도... 아니 대체 왜!!! 왜 특정 아이폰만 그러는지!!! 구글링 해본 결과 display 속성부터 position 속성까지 변경하는 방법들이 다양했는데 일단 내가 사용한 방법은 overflow:hidden 이 아닌 overflow:auto를 적용하는 것 이었다. 특이하게도 딱 overflow:auto로 값을 변경하니 text-overflow:ellipsis가 적용되었는데.... 아직도 원인은 모르겠다... 다만 작업중인 부분이 모바일 전용이고 해당 부분 위에 가상선택자로 투명한 박스를 올려놔서 사용자가 스와이프해도 해당 글 부.. 더보기 [CSS] list-style 바꾸기 - list-style? 웹 퍼블리싱을 하다 보면 리스트 부분을 작성할 때 ul, ol, dl과 같은 엘리먼트를 사용하게 됩니다. 이때 각각의 태그들이 기본적으로 보여주는 list-style을 보면 다음과 같습니다. 하지만 기본 list-style들은 원형의 도트 스타일만 지원해 주고 색상 또한 li의 색상을 이어받아 사용하기 때문에 커스텀이 필요한 상황이 많이 발생합니다. - 가상요소를 통한 스타일 제가 가장 자주 쓰던 방법이면서 list-style을 다양한 크기와 모양으로 만들 수 있는 방법입니다. 먼저 변경이 필요한 해당 list-style을 none으로 지정해준 후 li 엘리먼트의 position 속성을 relative로 변경합니다. 그 후 해당 엘리먼트에 가상요소인 ::before 나 ::aft.. 더보기 [CSS] @media query 가로·세로 적용 stylesheet 반응형 작업중에 고민되는 것 중 하나가 모바일 기기에서의 가로·세로 반응형 작업이다. 머릿속으로는 있을거야... 하고 생각만해놓고 1도 찾아보지 않은 내가 밉다... 모바일기기의 가로 세로를 체크하는 방식은 반응형 작업을 할 때 처럼 미디어쿼리를 사용한다. /* 세로 모드: Portrait(포트레이트) 모드 */ /* 가로 모드: Landscape(랜드스케이프) 모드 */ @media (orientation: portrait) { /* Portrait 모드일 때 적용할 CSS */ } @media (orientation: landscape) { /* Landscape 모드일 때 적용할 CSS */ } 사실 다른 방법으로는 javaScript를 이용하여 페이지에 접속 할 때 혹은 디바이.. 더보기 [CSS] 모바일 기기에서 button touch 시 효과 제거 - 웹 개발 시 button 앨리먼트를 작성 후 모바일 기기에서 터치를 했을 경우 파란색 background가 생기는 것을 확인할 수 있다. 이 때 아래의 코드를 사용하여 해당 background를 제거해줄 수 있다. -webkit-tap-highlight-color : transparent !important; 더보기 [CSS]nth-child 다양하게 활용하기 nth-child 간단 사용법 위와 같은 소스에서 li 전체에 스타일을 줄 때는 ul에 있는 클래스를 지정해준 후 css를 적용하면 해당 ul의 자식인 li에게 스타일을 한번에 적용해 줄 수 있습니다. /* nav의 자식인 ul 전체에 적용 */ nav ul {border:1px solid blue;} /* nav의 자식인 ul 중 첫번째 자식을 선택*/ nav ul.nth-child(1) {border:1px solid red;} /* nav의 자식인 ul 중 세번째 자식을 선택*/ nav ul.nth-child(3) {border:1px solid green;} 위와같이 nth-child()를 사용하여 부모의 자식 요소 중 선택한 자식요소만 선택할 수 있습니다. first-child 와 last-ch.. 더보기 [CSS] flex로 중심잡기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 더보기 [CSS] @media 간단하게 알아보기 반응형 웹 사이트를 만들 때 쓰이는 것이 미디어쿼리 입니다. 미디어쿼리란 간단하게 다양한 사용자들이 각각 다른 크기의 화면을 통해 웹 페이지를 접하는데 각 화면의 크기에 맞게 스타일시트 설정을 해주는 것 입니다. 즉, 각기 다른 화면의 웹 페이지를 다 만드는 것이 아니라 한 스타일시트 내에 일정 크기의 화면 크기 설정을 해준 후 다양한 사용자들의 화면 크기에 맞게 웹 페이지의 스타일이 자동으로 바뀌게 해주는 것 입니다. @media (max-width:1024px) @media (min-width:768px) 1024px 이하의 넓이에서 적용 768px 이상의 넓이에서 적용 미디어쿼리를 작성 시 주의할 점이 있는데 만약 max-width 를 쓰게 된다면 위에서부터 넓이가 큰 화면 설정부터 적용키셔주고 m.. 더보기 [CSS] margin padding margin 과 padding 속성은 여백을 준다는 속성은 같지만 확실한 차이가 있는 값 입니다. padding margin 뜻 안쪽에 공간을 준다 바깥쪽에 공간을 준다 See the Pen padding margin by 김기태 (@kkt9102) on CodePen. 위에 코딩을 보면 먼저 모든 박스에 공통으로 width:100px height:100px border:5px solid black 을 주고 각각 박스에 다른 색을 넣어준 후 1번 박스에는 margin:10px 을 주었고 2번 박스에는 padding:10px 을 주었습니다. 1번 박스의 경우 박스의 위치가 움직인 것 처럼 보이지만 사실은 박스 바깥에 10px의 공간이 생겨서 박스 자체가 움직인 것 처럼 보이고 2번 박스의 경우 박스 크기가.. 더보기 이전 1 2 다음
