본문 바로가기

퍼블리싱 & 프론트엔드47

아이템(div)의 너비 설정하기 - flex item 속성(2) 얼마 전에 flex css 속성들에 대해 포스팅하기로 했었는데 flex item 속성(1)까지 포스팅을 하고 그 후로 시간이 꽤 지났다. (이런 저런 일들로 너무 바빴...) 늦었지만 마무리는 해야하니까 오늘은 flex item 속성 제 2탄! 지난 번에 item 정렬과 순서를 설정하는 css를 알아보았다면 오늘 소개할 아이들은 item 너비와 관련된 css 들이다. 2020/10/29 - [개발자 꿈나무/CSS] - flex 기초 - flex란 무엇인가? 2020/11/06 - [개발자 꿈나무/CSS] - 아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) 2020/11/07 - [개발자 꿈나무/CSS] - 아이템(div) 정렬과 여백 설정하기 - flex .. 2021. 1. 1.
div 박스 & png 투명배경 이미지에 그림자 효과주기 이벤트 페이지를 퍼블리싱하던 도중 css 스타일시트를 이용하여 그림자 효과를 주어야 하는 div 박스와 투명배경 png 이미지를 만났다. 이 두가지는 각각 그림자 효과를 적용하는 방법이 다른데 블로그에 정리해두려고 한다. div 박스 그림자 효과주기 그림자효과를 주려는 대상이 네모난 모양이라면 box-shadow 를 사용하여 그림자 효과를 줄 수 있다. .box { box-shadow : none; /* 그림자 효과를 없앰 */ box-shadow : x-position y-position blur color inset; /* 왼쪽부터 차례대로 가로 위치, 세로 위치, 그림자의 흐린 정도, 그림자 색상 가로 위치, 세로 위치는 양수이면 오른쪽, 음수이면 왼쪽에 그림자를 만들고, 블러값은 클수록 흐려짐 i.. 2020. 11. 29.
아이템(div) 정렬과 순서 설정하기 - flex item 속성(1) 지난 포스팅에서는 flex와 flex-container(부모 요소)에 사용할 수 있는 속성들에 대해 알아보았다. 2020/10/29 - [개발자 꿈나무/CSS] - flex 기초 - flex란 무엇인가? 2020/11/06 - [개발자 꿈나무/CSS] - 아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) 2020/11/07 - [개발자 꿈나무/CSS] - 아이템(div) 정렬과 여백 설정하기 - flex container 속성(2) 이번 포스팅에서는 flex-item(자식 요소)에 사용할 수 있는 속성 중에서 순서, 정렬을 변경하는 css에 대해 설명할 예정이다. order item의 순서를 설정하는 css이다. 숫자가 클수록 순서가 밀리며 음수, 0, 양수.. 2020. 11. 13.
아이템(div) 정렬과 여백 설정하기 - flex container 속성(2) div 박스의 사이 간격을 동일하게 하고 싶다면? 내부 컨텐츠 길이에 상관없이 div 박스가 동일한 넓이를 갖게 하고 싶다면? 이번 포스팅은 이러한 물음들에 대한 좋은 해결책이 될 것이다. 이번에 소개할 css 태그 모두 지난 포스팅과 마찬가지로 flex container에 적용 가능한 속성이다. justify-content 수평축의 정렬 방법을 설정하는 css이다. 속성값은 아래와 같다. .flex_container { justify-content: flex-start; /* 기본값, 아이템을 시작점으로 정렬 */ justify-content: flex-end; /* 아이템을 끝점으로 정렬 */ justify-content: center; /* 아이템을 가운데 정렬 */ justify-content: .. 2020. 11. 7.
아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) flex css 제 2탄! 오늘은 flex container에 사용할 수 있는 속성 중에서 item(div)을 수직/수평 정렬하는 방법에 대해 소개하려고 한다. 더해서 브라우저 사이즈에 따라 줄바꿈 여부를 결정하는 css도 함께 알아두면 도움이 될 것이다. flex-direction item을 수평(가로) 정렬할 것인지, 수직(세로) 정렬할 것인지 결정하는 css 이다. .flex_container{ flex-direction: row; /* 기본값, 아이템을 왼쪽에서 오른쪽으로 수평 정렬함 */ flex-direction: row-reverse; /* 아이템을 오른쪽에서 왼쪽으로 수평 정렬함 */ flex-direction: column; /* 아이템을 위에서 아래로 수직 정렬함 */ flex-dire.. 2020. 11. 6.
flex 기초 - flex란 무엇인가? 웹페이지의 레이아웃을 잡을 때 보통 display, float, position과 같은 css 속성들을 이용한다. 그런데 이러한 속성들로 레이아웃을 구현하는 게 몹시 복잡하거나 어려울 때가 있다. 그 한계를 극복하기 위해서 css3에 flex라는 방식이 새롭게 추가되었다. flexible box, flexbox라고도 부르는 flex는 레이아웃 배치 기능에 중점을 맞추어 고안되었기 때문에 기본 방식보다 훨씬 더 수월하게 퍼블리싱이 가능하다. flexbox는 부모 요소인 flex container와 자식 요소인 flex item으로 구성된다. flex container가 flex 태그의 영향을 받는 공간이고, 그 안에서 flex item들의 배치, 정렬이 설정된 속성에 따라 변경되는 것이다. flex 시작하.. 2020. 10. 29.
이미지 태그 <img>의 alt와 title 속성 일반적으로 이미지 태그는 아래와 같이 사용한다. baby.jpg 라는 파일명의 이미지 파일을 불러온 것이다. 그런데 이러한 이미지 태그 에 alt나 title 속성을 사용한 것을 볼 수 있다. 이 속성들은 각각 무엇이고 어떤 상황에 사용해야 할까? alt의 의미와 사용 이미지 태그의 alt 속성은 해당 경로에 이미지가 없거나 엑박이 뜰 때 이미지 대신 보여지는 텍스트이다. 대체 텍스트이므로 당연히 이미지의 내용을 대체할 수 있는 이미지 설명이어야 하며, 텍스트가 포함된 이미지의 경우 반드시 해당 텍스트를 함께 적어주는 것이 좋다. 시각장애인들은 alt의 내용을 리더기로 듣게 되는데, 현재 국가지침으로 정해져 있는 alt 텍스트의 글자수 제한은 없으나 통상 200~250자 정도까지를 권장하고 있다. (그 .. 2020. 10. 28.
스타일시트 vertical-align 사용해서 <div> 수직 정렬하기 vertical-align은 inline 또는 table-cell에서 수직 정렬을 지정해주는 css 속성이다. 속성값은 아래와 같다. vertical-align: baseline; /* 부모 baseline에 맞추어 해당 요소의 baseline을 정렬 */ vertical-align: sub; /* 해당 요소의 baseline을 부모의 아래첨자 기준에 맞추어 정렬 */ vertical-align: super; /* 해당 요소의 baseline을 부모의 위첨자 기준에 맞추어 정렬 */ vertical-align: text-top; /* 해당 요소 상단을 부모 요소 폰트의 상단에 맞추어 정렬 */ vertical-align: text-bottom; /* 해당 요소 하단을 부모 요소 폰트의 하단에 맞추어 정렬.. 2020. 10. 17.
CSS 스타일시트 or <style> 태그 내에서 주석 처리하기 /*주석*/ CSS 스타일시트 혹은 html 문서 내에서 [TIP] html 주석과 마찬가지로 css 주석도 중첩 사용은 불가능하다. /* 이후의 첫번째 */가 주석을 끝내는 것으로 인식한다. 2020. 10. 4.
html 문서 주석 처리하기 <!--주석--> html 문서를 작성할 때, 해당 코드에 대한 추가 설명을 넣고 싶을 때가 있는데 이럴 때 주석(comment)을 사용한다. 주석은 웹 브라우저의 페이지 소스 보기 등을 통해서는 확인이 가능하지만 웹 페이지 내에는 나타나지 않는다. 주석(comment)은 해당 코드에 대한 추가 설명이나 디버깅을 위해 작성한 구문을 의미한다. 주석은 로 마무리한다. (느낌표 유무 차이) 주석은 한줄에도, 여러 줄에도 모두 적용이 가능하여 활용도가 높다. [TIP] 주석을 중첩으로 인식하지는 못하므로, 주석 안에 또 다른 주석을 사용해서는 안 된다. 2020. 9. 30.

티스토리툴바