HTML CSS 썸네일형 리스트형 텍스트 길이 넘칠때 ... 표시 해주기 (ellipsis, webkit) 요것두 스타일링에 관련된 거지만 매번 헷갈릴수 있기 때문에 정리해보겠다링 블록을 넘어선 길이의 텍스트가 있을때 어떻게 처리해줄까. 물론 텍스트가 다 보일 때 까지 블록의 높이 혹은 너비를 조정할 수 있지만 본인이 짜둔 블록 디자인에 맞지 않게까지 커질 수 있다리. 이 블록의 크기, 폰트 크기에 맞게 텍스트를 전부 나열해보면 위와 같이 6줄이 나오게 된다. 하지만 요거 너무 길엉~ 해서 4줄정도만 혹은 3줄 정도만 더 줄이고 싶을 때에는 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; // 요거 요거 중요 -webkit-line-clamp: 4; // 4줄을 맥스로 둘때, 숫자가 맥스 줄 크기당 -webkit-box-orient: vert.. 더보기 Input 태그 테두리 없애보리깅~ (focus, outline) 오늘 개인 프로젝트를 진행하다가 input 태그의 테두리 부분을 없애는 부분에 대해서 한번 정리해두면 나중에 또 쓸일이 있을것 같아 정리해본당 우선 html css 를 조금 만져봤다면 border 속성을 이용해 웬만한 블록의 테두리들은 다 관리해 줄 수 있다. 이 상태에서 테두리를 없애보릴라믄 border:none 을 해주면 된다링 .writeInput{ font-size:30px; padding: 20px; width: 70vw; border:none; } 테두리를 없애는데 벌써 성공해 버렸지만 input 태그에 focus 가 되는 순간 바로 테두리가 생겨버린당 ㄷㄷ.. 요때는 hover 와 마찬가지루 .writeInput{ font-size:30px; padding: 20px; width: 70vw;.. 더보기 반응형 웹 (간단한 예제 Header 만들기) 반응형웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 간단히 말하면 당신이 가로 10m 선에 맞춰서 가구나 예쁜 화분들을 정리해 놓았다고 치자. 물론 10m 짜리에 맞춰서 했을 때는 이쁘게 해놓았을 것이지만 주변에서 미안한데 5m 공간만 써라해서 공간이 줄어들었을 때도 이쁘게 정리가 되어있을 까 하는 것이다. 포인트는 5m 공간에 대비한 배치나 디자인도 신경을 써야 한다는 것이다. 반응형 웹을 구축하기 위해서는 CSS의 미디어 쿼리가 필요하다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일.. 더보기 <CSS> @keyframes 애니메이션 나는 처음에 동적으로 움직이는 애니메이션 효과는 스크립트로만 처리를 해줄 수 있는 줄 알았는데 CSS 코드 만으로 충분히 애니매이션 효과가 가능하다. mdn을 뒤져보면 @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } 이런 식으로 기본적인 정의가 되어있다. 간단히 정리를 하면 slidein 이라는 블록에 애니메이션 효과를 맥이는 것인데 @keyframes 뒤에 본인이 스타일먹일 블록명 from >> 시작할 때의 스타일 to >> 끝났을 떄의 스타일 정도로 기초를 잡고 나도 처음 써봐서 구글링해서 나온 코드를 기반으로 한번 적용된 화면을 보자 See the Pen MWKBRmJ.. 더보기 <HTML/CSS>이쁜 메뉴바 만들기 (sticky) (fixed) 보통의 웹사이트를 보면 화면 상단에 메뉴바가 되었든 사이트의 로고가 되었든 우리가 스크롤을 내리면 밑으로 따라 내려오는 것을 볼 수가 있다. 처음 CSS를 배웠을 때 엄청 배우고 싶었고 그만큼 자주 쓰고 있으니 한 번 알아보도록 하자. See the Pen NWxrVOr by Sang Hoon Jeong (@DevilFront) on CodePen. 자 배운대로 스티키를 써 봤지만 그냥 sticky만 선언해주면 안되고 무조건 top, left,right 등 하나이상의 위치속성으로 나타내는 것이 필요하다. 단순히 스티키를 써주면 안되고 따라 내려오는 지점이 어딘지를 top 속성등을 이용해서 나타내주면 된다. 필수다 필수! See the Pen GRoqaPK by Sang Hoon Jeong (@DevilF.. 더보기 <CSS>배경색깔 입히기 (opacity),(rgba) 우리가 원하는 블록에 텍스트 뒤에 배경색깔을 입힐 떄 종종 아래와 같은 상황이 발생하는 분들이 있을것이다. 기존의 색깔에서 로 투명도를 줫다고 생각했는데 입히고 나니까 뭔가 텍스트 위에 겹쳐서 뿌옇게 보이게 되는 경우가 있을 것이다. See the Pen GRoqaJP by Sang Hoon Jeong (@DevilFront) on CodePen. 내가 생각한대로 순차적으로 했지만 뭔가 텍스트가 뿌옇게 덮여진 느낌이다. 그럴떈 아래처럼 에서 rgba 속성을 이용하면 된다. See the Pen YzwWbyj by Sang Hoon Jeong (@DevilFront) on CodePen. 어찌보면 당연하게 뿌연 것이다. opacity 속성이 블록 전체에 먹은것이라 뿌옇게 보이는 것이고 배경색깔에만 집중해서.. 더보기 [HTML/CSS] 블록배치 방법 <flex> 우리는 CSS를 이용해서 기존의 HTML로 만든 블록들을 우리 마음대로 배치하고 움직일 수 있어야 한다. 비록 아직 기본중의 기본만 겨우 구사 할 수 있지만 블록들을 이쁘게 꾸미고 색깔을 이쁘게 주는것보다는 먼저 내가 원하는곳에 블록들을 마음대로 배치 할 수 있어야 한다고 생각한다> 더보기 이전 1 다음
