css
-
overflow 속성(visible, hidden, scroll, auto)css 2023. 7. 21. 11:13
overflow란? 주어진 공간이 모자라서 넘치는 컨텐츠를 어떻게 보여줄지 결정할 때 사용 visible : 기본값 : 컨텐츠가 주어진 공간보다 넘칠 때 밖으로 밀어내며 컨텐츠를 다 보여줌 hidden : 컨텐츠가 주어진 공간보다 넘칠 때 공간 밖으로 삐져 나가는 컨텐츠를 숨겨버릴 수 있음 scroll : 주어진 공간보다 넘치는 콘텐츠를 볼 수 있도록 스크롤바가 생기는 기능 : auto와 달리 항상 스크롤바가 있음 : 주어진 공간보다 많아서 숨겨진 콘텐츠를 스크롤바를 이용하여 볼 수 있음 : scroll 대신 overflow-x overflow-y 속성을 사용하여 가로 세로 스크롤을 선택적으로 적용할 수 있음 auto : 컨텐츠의 양이 변함에 따라 스크롤바를 생기게 할지 숨기게 할지 자동으로 결정해줌 :..
-
white-space 속성(nomal, nowrap, pre, pre-wrap, pre-line)css 2023. 7. 21. 10:26
white-space란? 여백 공백을 뜻함 nomal : 기본값 : 공백을 여러개 넣어도 1개의 공백으로 표시 : 글이 길어지면 자동으로 줄바꿈 nowrap : 공백을 여러개 넣어도 1개의 공백으로 표시 : 텍스트가 길어져도 자동으로 줄바꿈 하지 않음, 같은 줄에 계속 표시 pre : 공백을 코드에 있는 그대로 표시 : 태그처럼 동작함 : 코드에 줄바꿈이 없다면 줄바꿈을 하지 않음 pre-wrap : 공백을 코드에 있는 그대로 표시 : 코드에 줄바꿈이 없어도 자동으로 줄바꿈 pre-line : 공백을 여러개 넣어도 1개만 표시 : 코드에 줄바꿈이 없어도 자동으로 줄바꿈 : 코드에 줄바꿈이 있어도 그대로 표시 참고 https://www.daleseo.com/css-white-space/ https://ab..
-
display girdcss 2023. 7. 5. 15:42
gird의 기본 구조 gird container : 부모 요소로 gird의 영향을 받는 전체 영역 gird item : 자식 요소로 gird의 속성에 따라 각각의 아이템들이 배치되는 것 gird 용어 그리드 컨테이너(grid container) : display gird를 적용하는 영역으로 gird의 영향을 받는 전체 영역 그리드 아이템(grid item) : grid container의 자식요소로 아이템들이 grid의 규칙에 맞게 배치됨 그리드 트랙(grid track) : gird의 행row과 열column 그리드 셀(grid cell) : grid 한칸을 의미하며 grid item 하나가 들어있는 가상의 영역을 말함 그리드 라인(grid line) : grid cell을 구분하는 라인 그리드 번호(..
-
table에 border-radius 적용하기(table 테두리 둥글게 만들기)css 2023. 7. 5. 14:59
table 테두리를 둥글게 만들고 싶어서 table에 border-radius를 적용했는데 radius가 적용이 되지 않았다. 알고보니 border-collapse: collapse; 속성 때문에 서로 충돌이 일어나 border-radius가 적용이 되지 않았던 것이다. table에 border-radius 적용하는 방법 table을 div로 한번 깜싸기 div에 border-radius와 overflow: hidden; 추가 테이블-07 약정기간 이용기간 할인반환금 1년 약정 3개월 이하 누적 할인액 X 100% 4개월 이상 누적 할인액 X {잔여약정일수 / (약정기간 - 90일)} 2년 약정 6개월 이하 누적 할인액 X 100% 7개월 이상 누적 할인액 X {잔여약정일수 / (약정기간 - 180일)}..
-
css로 화살표, 삼각형 기호 만들기css 2023. 7. 4. 17:29
화살표 만들기 이전 화살표 다음 화살표 .arrow-prev { position: relative; } .arrow-prev:before { position: absolute; left: 0; top: 0; content: ''; width: 50px; //화살표 크기 height: 50px; //화살표 크기 border-top: 5px solid #000; //화살표 선 border-right: 5px solid #000; //화살표 선 } 방법 화살표를 넣을 태그에 가상선택자를 사용하여 만듬 width height로 화살표의 크기를 정해줌 border로 화살표 선을 만들어줌 원하는 모양으로 방향을 돌려줌 여기서 이런 모양의 화살표를 만들어주려면 화살표를 돌려주면 된다 ! 즉, transform..
-
웹 접근성에 준수하며 table 만들기css 2023. 6. 27. 17:29
마크업의 기본 구조 태그 : 표 : 행 : 열의 제목 : 내용 셀 : 표의 머리 부분 : 표의 본문 부분 표의 꼬리 부분 : 표 제목 : 행의 그룹화, 보통 셀의 width 값을 줄 때 사용 속성 colspan : 열 합칠 때 사용하는 속성 rowspan : 행 합칠 때 사용하는 속성 scope : th에 들어가는 속성으로 th가 적용되는 범위를 나타내줌 : 웹 접근성을 위해 th 태그에 scope 속성을 넣어야 함 : col, row, colgroup, rowgroup 웹 접근성 준수를 위해 필요한 조건 1. cpation 필수(display: none;을 사용하지 않고 숨기기) 2. th에 scope 작성 3. thead 있으면 작성하기 없으면 넣지 않기 4. tbody 넣기 5. thead 영역에는..
-
floatcss 2023. 6. 19. 16:36
float이란? : 떠있다라는 의미로 말그대로 화면에서 요소를 띄우는 역할 : float 속성을 가지게 되면 inline 요소가 암묵적으로 block 요소로 바뀜 float 사용시 주의사항 position의 absolute를 사용할 수 없음 => float 속성이 relative한 위치 지정을 하기 때문에 position: absolute; 속성이 적용되지 않음 float을 사용한 요소의 부모 요소는 float을 사용한 요소의 높이값을 인식하지 못함 => 부모요소에 overflow: hidden;을 적용하여 해결할 수 있음 float을 사용한 다음 요소부터 float 속성이 적용된 요소와 겹치는 현상이 발행함 => clear 속성을 사용하여 이후 요소들이 더이상 float의 영향을 받지 않게 해줌 flo..
-
displaycss 2023. 6. 19. 16:05
display란? html 요소들을 시각적으로 어떤 형식으로 보여줄지 결정하는 속성 display: none; : 화면에서 보여지지 않음 display: inline; : span, a, img, strong : 기본적으로 텍스트처럼 옆으로 쭉 나열되다가 공간이 모자르면 다음 줄로 넘어가는 특징 : width height 설정 불가 display: block; : div, p, h : 블록 요소가 있는 한줄을 전부 차지하고 높이는 컨텐츠의 높이만큼 차지하는 특징 : 옆에 공간이 남더라도 다음 줄로 줄바꿈을 함 : width height 설정이 가능 display: inline-block; : 컨텐츠가 차지하는 공간만큼을 차지함 : 옆에 공간이 남으면 inline 속성처럼 옆으로 정렬됨 : inline-b..