본문 바로가기

CSS20

[CSS] 텍스트 다루기-2 자간, overflow 줄 바꿈 퍼블리셔나 프론트 개발자라면 반드시 알아야 하는

letter-spacing word-break overflow-wrap letter-spacing 글자 간격 조절하는 옵션. CSS 속성은 글자 사이의 간격(자간)을 조절합니다. div { letter-spacing: 10px; } 옵션 값을 위처럼 letter-spacing: 10px;을 주게되면, 글자 사이의 간격이 10px만큼 떨어져서 화면에 그려집니다. letter-spacing 설명. /* */ letter-spacing: normal; /* 값 */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px; /* 전역 값 */ -- letter-spacing: normal; 현재 글꼴의 기본 간격. /* 값 */ 기본 간격에 추가할 글.. 2021. 4. 17.

[CSS] 블록에 scroll주는 법 프론트 개발자라면 반드시 알아야 하는

height: 100px; overflow: scroll; 2021. 4. 15.

CSS 반드시 알아야 하는 기초 개념 면접 필수 질문

웹 퍼블리셔 또는 프론트 개발자 신입 면접에서 다루는 기본 개념 꼭 물어봅니다. margin과 padding의 차이점 margin : border를 기준으로 바깥 여백을 주는 것. //margin : 상하 좌우 margin : 0 auto; // -> 가로 가운데 정렬. padding : border를 기준으로 안 쪽 여백을 주는 것. // padding: 상하 좌우; position position : static 기본 페이지 레이아웃을 따릅니다. 기본값입니다. (default)요소를 일반적인 문서 흐름에 따라 배치합니다. position : relative 자기 자신을 기준으로 Offset이 적용됩니다. top, right, bottom, left를 기준으로 Offset이 적용됩니다. position.. 2021. 4. 8.

CSS 적용 우선순위 프론트엔드 개발자라면 반드시 알아야하는 CSS 우선순위

마크업 작업과 CSS 작업 그리고 vue.js프레임워크를 사용해서 현업에서 개발을 하면서도, 이제야 CSS 스타일 적용 우선순위에 대해서 공부하게 되네요. 매번 중복되는 요소에 style이 들어가서 우선적으로 style을 적용하기 위해서 !important를 남발했던 저 스스로 반성하게 되는 것 같습니다. 그럼, 스타일 적용 우선순위에 대해서 알아보겠습니다. 1. 속성 값 뒤에 !important 붙이는 속성. 2. HTML에서 style옵션을 준 경우 3. #id 로 지정한 속성 4. .클래스, :추상클래스로 지정한 속성 5. 태그이름으로 지정한 속성 6. 상위객체에 의해 상속된 속성 상위객체에 의해 상속된 속성 VS .클래스 끼리에서의 우선순위는 상위객체에 의해 상속된 속성의 스타일이 우선 적용됩니다.. 2021. 4. 3.

프론트엔드 개발자와 퍼블리셔라면 반드시 알아야 하는 CSS 단위

px 가장 편리하게 기본적으로 사용할 수 있는 단위입니다. PX은 숫자 그대로의 절댓값 고정 크기입니다. 숫자의 크기에 맞게 웹에 보여줍니다. 반응형 웹을 개발한다면, 메인으로 사용하지 않는 것이 좋습니다. rem(= root em) 상대적인 크기 조절이 가능하기 때문에 반응형 웹사이트를 작업할 때 많이 사용 됩니다. rem 단위는 html 요소의 크기의 몇 배인지로 크기를 정합니다. 예를 들어서 html 폰트 크기를 14px로 설정한다면, 여기서 사용하는 rem은 14px 단위로 계산이 일어납니다. 2rem은 28px이겠죠? html { font-size: 14px; } div { font-size: 2rem; // 14 * 2 = 28px; } html에서 사이즈를 지정하지 않으면 기본적으로 시스템 .. 2021. 4. 3.

[CSS] 박스 그림자지게 하는 방법

div 박스에 선이 아닌, 그림자를 지게하는 방법입니다. CSS 키워드는 box-shadow입니다. 전 후 box-shadow: ; 옵션 설명. 첫 번째와 두 번째 옵션입니다. 그림자의 offset을 설정합니다. 크면 클 수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아집니다. 음수 값은 사용할 수 없습니다. 값을 설정하지 않으면 0이 되어 테두리가 선명해집니다. 양수 값은 그림자가 더 커지고 확산하며, 음수 값은 그림자가 줄어듭니다. 기본값은 0(그림자와 요소 크기 동일)입니다. 그림자 음영의 색상 ex) 전. 아무런 옵션 없이 단순히 영역만을 만든다면, 아래 사진처럼 선으로만 구분되는 영역이 만들어 집니다. 후. box-shadow: 0 6px 6px 0 gray; div { width.. 2021. 3. 1.

[CSS]글자 밑줄 긑기 및 포인터 클릭 아이콘으로 변경

CSS로 글자 밑에 밑줄 긑기 text-decoration: underline; CSS로 글자 밑에 있는 밑줄 없애기 -> 태그에 사용 많이 함. text-decoration: none; 포인터 클릭 아이콘으로 변경 cursor: pointer; 2021. 2. 18.

[CSS]dim 검정 투명 화면으로 처리하기

가끔, 웹이나 앱을 처음 들어가게 된 경우에, 웹에 대한 설명을 하기 위해서 웹이나 앱 위에 투명한 검정색 팝업창을 전체크기로 해서 설명을 적어 놓은 기능을 보신 적 있으실 겁니다. 이걸 'dim'이라고 합니다. 투명한 색을 전체 배경으로 하는 CSS 사용 키워드 background-color: rgba(0, 0, 0, 0.3); rgba(적색, 녹색, 청색, 투명도)를 각 입력값으로 받습니다. 맨 마지막의 투명도의 값은 0~1 사이의 값을 가집니다. 1이 투명하지 안게 되는 쪽입니다. 적색, 녹색, 청색으로 색을 변경할 수 있습니다. 색의 강도는 0~255의 값으로 강도를 조절할 수 있습니다. 예시) 예시 코드 HTML 투명한 배경을 주고, 설명 CSS .init_desc { position: abso.. 2021. 2. 18.

[CSS] 글자가 길어서 영역 밖으로 벗어났을 때 생략처리 방법.

글의 결과 CSS를 사용해서 영역을 벗어날 정도로 긴 텍스트를 생략 처리를 해봅니다. CSS 설정 옵션 width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-bottom: 0.14em; //👈 글자 밑이 hidden으로 인해 잘려보일 수 있어서 추가함. 안녕하세요. 이번에 회사 업무를 하면서, 부모영역이나 태그 영역을 벗어날 정도로 긴 글자가 들어갈 경우에 대한 예외처리를 해야 했습니다. 서버로 부터 받아 온 데이터를 수정해서 화면에 보여주는 방법은 좋지 않다고 생각했습니다. CSS로 처리해 봅시다. 일단, CSS 코드로 작성한 결과 화면입니다. 여기서 width를 넘어가면, CSS 처리로 글자를 없애고,.. 2021. 2. 12.

css 폰트 단위

px 가장 일반적으로 사용합니다. 절대 고정값을 줄 때 사용합니다. 반응형 웹에 적합하지 않습니다. em과 rem 둘 다 동적입니다. 고정된 값이 아닙니다. em (부모)요소의 글꼴 크기 rem 루트() 요소의 글꼴 크기 em: 요소 안에 요소가 있는 경우, '합성'동작때문에 원하는 사이즈가 적용되지 않을 수 있습니다. 아래 사진은 MDN에서 가져온 사진입니다. rem : em단위를 사용할 때 발생하는 '합성'동작 문제 때문에 생긴 단위입니다. 그냥 간단히 생각하면 root em입니다. 최 상위 요소인 요소의 크기에 비례해서 크기를 가지는 상대적인 단위입니다. 반응형 웹을 만들 때 좋습니다. 요소의 크기를 지정하지 않는 경우, 브라우저 기본인 16px로 적용됩니다. 1rem으로 계산됩니다. vh와 vw .. 2021. 1. 26.

티스토리툴바