아래 코드를 블러처리할 컨테이너에 작성한다. filter: blur(10px); -webkit-filter: blur(10px); /* 뿌옇게 하고싶은 만큼 픽셀값 높이기! */ 아래코드의 결과물(box_2가 블러효과 적용한것) See the Pen filter : blur; by kaia (@kaiaakim) on CodePen. **** !주의! box_2처럼 블러를 적용한 영역안에있는 글자는 함께 필터가 적용되므로 블러처리 없는 글자를 위에 띄우려면 글자 박스 엘리먼트를 따로 추가하여 포지션으로 띄워주어야한다. ****
문장줄임 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 특정단위로 텍스트 줄이기 위한 구문 white-space: normal; display:-webkit-box; -webkit-line-clamp:3; /* 문장을 줄이기전 보여질 줄의 갯수를 쓴다. */ -webkit-box-orient:vertical; overflow:hidden
기존에 자식요소에 적용한 position: absolute; 를 해제해야하는경우 원하는 브레이크포인트의 @media screen 안의 해제할 요소에 position : static; 작성해주기!(기본값이다)
display : flex; 화면에 아이템을 배치하는 속성으로 부모컨테이너에 작성한다. 배치방향설정 flex-dirextion flex-direction: row; /* flex-direction: column; */ /* flex-direction: row-reverse; */ /* flex-direction: column-reverse; */ - row(기본값) 행(가로)방향으로 배치 - row-reverse 역순으로 가로배치 - column 열(세로)방향으로 배치 - column-reverse 역순으로 세로배치 줄넘김 flex-wrap (화면영역에 넘칠경우 줄바꿈설정) flex-wrap: nowrap; /* flex-wrap: wrap; */ /* flex-wrap: wrap-reverse; */ ..
box3개를 inner안에 쏘옥쏙쏙 가운데정렬 해보기! box_1 box_2 box_3 div class="wrap" - 화면 전체 div class="inner" - 컨텐츠를 감싸주는 역할 ul class="boxList" - 컨텐츠 요소들을 감싸는 부모 li - 실질적 컨텐츠로 보여질 자식 구조화만 완료했을때 보여지는 모습 먼저, 생각해야할 조건들은 wrap 을 화면비율 100%설정 inner 를 80%로 할것 ul 은 inner에 꽉차게 li 는 ul의 한 줄 안에 동일비율로 나열하되, 요소사이의 margin여백을 줄것 일단 ul.boxList 의 영역을 설정해주며 가운데 정렬을 해보자. .wrap{ width: 100%; } .wrap .inner{ width: 80%; margin: 50px a..
margin - 바깥여백 padding - 안쪽여백 시각적으로는 box를 기준으로 주황색 영역에 margin이 적용되고 푸른색영역에 padding이 적용된다. margin과 padding의 적용방향 .box{margin: 20px;} 값을 하나만 적을경우 =상하좌우 모두 20px .box{margin: 10px 20px;} 값을 두개 적을경우 =상하 10px 좌우 20px .box{margin: 10px 20px 30px;} 값을 세개 적을경우 =상10px 좌우20px 하30px .box{margin: 10px 20px 30px 40px;} 값을 네개 적을경우 =상10px 우20px 하30px 좌40px //상단부터 시계방향 순서대로 적용된다. ! margin과 padding을 함께 적용했을경우 padd..
css적용방식으로는 1. inline스타일 2. 내부스타일시트 3. 외부스타일시트 이렇게 총 3가지 방식이 있습니다. 적용 우선순위는 inline>내부>외부 순서대로 적용됩니다. 그리고 위에서부터 아래로 문서를 읽기에 마지막으로 적용한 스타일이 먼저 적용됩니다. css스타일을 적용해 주기전에 먼저 html 구조를 짜봅시다! 세가지 방식으로 적용해보기 위해 구조를 짜 두었고 결과창은 이렇게 나오네요! 👉 첫째! inline스타일은 말그대로 스타일을 적용하고 싶은 html태그 안에 css를 입력하는 방법입니다. 적용할 태그에 직접적으로 스타일을 지정할때 용이합니다. html태그안에 적어야하기에 수정이 필요할 때 내가 적용한 스타일이 어디에 있는지 찾기 어렵습니다. 그러니 너무 자주 사용하지 맙시다! p태그안..
