css (9) 썸네일형 리스트형 border-radius CSS의 border-radius 속성은 박스 모델의 코너를 부드럽게 처리하기 위한 속성입니다.코너 부분에 원이 있다고 가정해서 원의 반지름 값을 지정하면 코너를 둥글게 처리할 수 있죠. 예를 들어, 다음과 같이 border-radius 값을 24px이라고 지정하면 네 방향 코너에 반지름 24px인 원이 있는 것처럼 둥글게 만들어 줍니다. Border radius 만일 안과 밖에 테두리가 있을 경우에는 다음처럼 표시하려면 border-radius 값을 어떻게 지정해야 할까요? 안과 밖의 요소에 같은 border-radius 값을 지정해 보겠습니다. Border radius 안쪽 와 바깥쪽 에 같은 border-radius 값을 사용했는데 모양이 어긋나 .. 웹 요소 가운데로 배치하기 방법1) 웹 요소의 너비(width) 값을 안다면 요소의 width 값을 지정했다면 좌우의 마진을 auto로 지정해서 가로로 중앙에 배치할 수 있습니다. 단, 이 방법은 width 값을 기준으로 하기 때문에 가로 방향으로만 중앙 정렬합니다. 방법 2) 요소의 너비(width) 값을 모른다면 가로로 중앙에 배치하려면 부모 요소의 50% 위치로 옮겼다가 (시작점이 50% 위치가 됨) 다시 요소 너비의 반을 왼쪽으로 이동시킵니다. 그림으로 보면 이런 형태가 되겠죠. 같은 방법으로 세로로 가운데 배치할 수 있습니다. #wrapper { width: 600px; height: 200px; position: relative; /* 부모 요소에 position: relative 포함 */ border: 1px sol.. 계산식을 사용하는 CSS 함수 - min(), max(), clamp() min() 함수, max() 함수 괄호 안의 값이나 계산식을 비교해서 작은 값이나 큰 값을 적용합니다. 예를 들어, box의 크기를 500px과 50% 를 비교해서 작은 값을 선택하거나 큰 값을 선택하도록 할 수 있습니다. .box1 { width: min(500px, 50%); } .box2 { width: max(500px, 50%); } 위 소스를 사용했을 때, 화면 너비가 1600px 이라면 .box1과 .box2의 너비는 어떻게 될까요? .box1은 500px과 50%(=800px) 중 작은 값이므로 너비가 500px이 되고, .box2는 500px과 50%(=800px)중 큰 값이므로 너비가 800px이 됩니다. clamp() 함수 반응형 웹이 일반화되면서 화면 크기에 반응하기 위한 CSS 기.. 계산식을 사용하는 CSS 함수 - calc() 최근에는 CSS에서 속성 값을 지정할 때 특정한 값이 아니라 계산식을 사용할 수도 있습니다. +, -, *, / 를 계산한 결과가 속성 값이 되는 것이죠. 예를 들어, 다음 소스는 요소의 너비를 부모 요소 너비 전체에서 200px을 뺀 만큼 지정하는 것입니다. 반응형으로 동작해서, 부모 요소의 너비가 얼마가 되든 무조건 200px을 뺀 나머지 크기를 너비로 사용하죠. 웹 화면에서 왼쪽에 200px 너비만큼 내비게이션이 있을 경우 사용하면 되겠죠? .element { width: calc(100% - 200px); } calc() 함수의 매개변수 자리에는 계산식이 들어갑니다. 이 때 주의할 것은 '+'와 '-' 연산자를 사용할 경우 반드시 연산자 앞뒤로 공백이 있어야 한다는 점입니다. +와 -는 양의 숫자.. 박스 모델 테두리에 이미지 넣기 박스 모델 테두리에 이미지를 넣기 위해서는 사용할 이미지를 지정하고, 그 이미지를 필요한만큼 쪼개서 가져와야 합니다. 여기서 중요한 것은 원본 이미지를 어떻게 나눌까, 하는 것입니다. 관련된 속성을 하나씩 살펴보면서 어떻게 적용되는지 살펴보죠. border-images-source 속성 박스 모델 테두리에 어떤 이미지를 넣을지 지정합니다. 만일 테두리 이미지를 가져오지 못할 경우를 대비해서 일반적인 테두리 스타일도 작성해야 합니다. 기본값은 none입니다. .box { width:300px; height: 300px; background-color: #eee; border: 36px solid orange; border-image-source : url('images/border.png’); } bord.. 텍스트 안에 배경 이미지 넣기 CSS의 background-clip 속성을 이용하면 박스 모델 안에서 배경 이미지를 어디까지 표시할지 결정할 수 있습니다. background-clip: border-box | padding-box | content-box 예를 들어, 아래 소스에서 .bg1 스타일은 배경 이미지를 border-box까지 표시하죠 See the Pen bg-clip-1 by do.it.html5 (@kyrieko) on CodePen. 이 속성을 사용해서 텍스트 안에 배경 이미지를 넣을 수도 있습니다. 이 경우에는 background-clip 속성을 text로 지정하는데, -webkit- 접두어가 붙은 background-clip 속성도 함께 사용해야 합니다. 그리고 글자색은 trasparent로 사용합니다. backg.. css 단위 - 길이 CSS에서 글자 크기나 마진, 패딩, 너비 등 길이와 관련된 값을 설정할 때 여러 단위를 많이 사용합니다. 각 단위가 어떻게 다른지 확인해 보도록 하겠습니다. 1) px 단위 CSS를 공부할 때 처음에 사용하는 단위가 px 단위죠. px단위는 절대적인 크기를 가지기 때문에 웹 브라우저 창의 크기와 상관없이 항상 같은 크기를 유지합니다. 웹 요소의 너비 값을 px로 지정하면 웹 브라우저 화면이 작아질 경우 일부가 가려질 수도 있죠. 다음 예제는 .pixel의 너비를 800px로 지정한 것인데, 브라우저 창 너비가 넓으면 .pixel 요소가 전부 보이지만 브라우저 창의 너비가 좁을 경우에는 .pixel 요소가 다 보이지 않고 가려집니다. Hello, Everyone! 2) % 단위 % 단위를 사용하는 것은,.. 가상 요소 ::before, ::after CSS의 가상 요소 중 ::before와 ::after는 지정한 요소의 앞이나 뒤에 텍스트나 이미지 등을 삽입할 수도 있고, 스타일을 추가할 수도 있습니다. HTML 태그 마크업(markup)은 웹 문서의 내용을 작성할 때 사용하는데, 예를 들어 버튼 앞에 붙이는 아이콘은 굳이 마크업을 사용할 필요는 없죠. 단순히 눈에 보이는(visiblie) 효과를 위해서 사용하니까요. 그래서 이런 요소들은 마크업 대신 ::before 가상 요소를 사용해서 삽입하는 경우가 많습니다. ::before나 ::after 요소를 사용할 때는 다음과 같은 형식을 사용합니다. 이 때 content 속성은 내용의 앞이나 뒤에 추가할 내용을 가리키는데, 따로 추가할 내용이 없다면 content:""; 처럼 빈 문자열을 사용합니다. .. 링크해서 사용하는 아이콘, Font Awesome 예전에는 웹 문서에 아이콘을 사용할 때 gif 파일을 따로 만들어서 사용해야 했습니다. 디자인을 직접 할 수 없다면 무료 아이콘 이미지를 구해서 사용하기도 했고요. 최근에는 직접 아이콘을 만들지 않고 웹에 올라와 있는 아이콘을 링크해서 사용할 수 있습니다. 특히 이 아이콘들은 이미지 파일이 아니라 아이콘을 위한 특수 웹 폰트 형식이나 SVG 파일 형식의 아이콘입니다. 웹 폰트 형식이나 SVG 파일은 텍스트 형식이기 때문에 글자 크기나 색상을 조절하는 것처럼 아이콘을 사용할 수 있어서 아주 편리하죠. 요즘에 가장 많이 사용하는 아이콘 서비스는 Font Awesome 입니다. 여기에서는 폰트어썸이라고 부르겠습니다. 폰트어썸은 무료 버전과 유료 버전이 있는데 무료 버전만으로도 여러 가지 아이콘을 사용할 수.. 이전 1 다음
