'공부/HTML, CSS' 카테고리의 글 목록

2022. 1. 19. 19:37 공부/HTML, CSS

break : 반복문 탈출 continue : 반복문의 처음으로 BREAK : for(let i=1; i

2022. 1. 4. 14:37 공부/HTML, CSS

em : 상위 요소의 배수로 크기를 조절한다. rem : 최상위의 폰트 사이즈를 기준으로 크기를 조절한다. em보다 혼란이 적고 선호된다.

2021. 12. 30. 16:11 공부/HTML, CSS

며칠 동안 도대체 뭐가 틀려서 생각대로 안 되는지 상관없는 코드들만 지웠다 썼다를 수십 번 이상 반복했다. 결국 CSS 스타일을 초기화하지 않고 진행했다는걸 알았다. 지금도 기초지만 그 기초의 기초가 되는 걸 빼먹고 진행했다고 생각하니 참... 일단 지금까지 배운 방법은 두가지이다. 1. CSS에 추가하기 * { margin:0; padding:0; } ul { list-style:none; } a { text-decoration:none; color:inherit; } 2. normalize 사용 cdn 기법으로 reset이 가능하지만 이는 브라우저마다 다른 스타일을 초기화하는 것이지 css의 모든 스타일을 초기화하는 건 아님. https://cdnjs.com/libraries/normalize

[CSS] z-index, position:fixed, box-shadow

2021. 12. 28. 00:37 공부/HTML, CSS

z-index z-index는 요소를 z축, 즉 요소의 위로 올릴 수 있다. z-index:9999; 같은 너무 큰 값을 지정해버리면 나중에 다시 손이 가야 할 수도 있으니 주의하며 사용해야한다. position:fixed fixed는 요소를 화면에 고정할 수 있다. viewport를 기준으로 위치가 잡힌다. box-shadow 요소에 그림자를 만들 수 있다. 그림자뿐 아니라 응용하여 팝업창이 떴을 때 뒷 배경을 어둡게, 불투명하게 만들 수도 있다. 아래는 그 예시이다. box-shadow:rgba(0, 0, 0, 0.5) 0 0 0 9999px; https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow 여기에서 box-shadow에 값을 바꾸어 적용해가며 실..

[CSS] ClearFix

2021. 12. 25. 00:31 공부/HTML, CSS

부모 영역에 가로, 세로 값을 부여하지 않고 자식 요소에서 float을 사용하게 되면 부모 영역이 사라진다. 그것을 해결하는 방법이 clearfix이다. (물론 부모 영역의 크기 값을 주게 되면 당연히 문제가 생기진 않는다.) 해결 방법 중 하나는 아래와 같다. .clearfix::after { clear: both; display: block; } 여기서 clear:both는 (left, right 값을 동시에 해제 해준다.) 그리고 display:block이나 table을 부여해주면 된다.

[CSS] margin, overflow, display:none, 코드 기본 정리

2021. 12. 25. 00:25 공부/HTML, CSS

margin, padding은 시계 방향으로 위치 지정이 가능한다. margin : 15px(위) 20px(오른쪽) 15(아래) 20px(왼쪽) 그리고 직접 값을 부여하지 않은 곳은 반대편에 지정한 값을 따른다. 예) padding : 15px 20px 15px (오른쪽 20px 값을 따름) overflow:hidden을 사용하면 요소에서 넘치는 부분을 가려 줄 수 있다. display:none을 사용하면 필요 없는 요소를 숨길 수 있다. 공통된 코드들은 한 곳에 묶어서 처리하면 좋다고 한다. ul>li::after { content: ''; display: block; width: 1px; height: 15px; background-color: gray; position: absolute; borde..

[CSS] 가상요소

2021. 12. 25. 00:13 공부/HTML, CSS

CSS에선 가상요소라는 걸 추가할 수 있다. HTML에서 태그를 추가 할 필요 없이 CSS에서 필요한 부분에만 간단하게 추가 할 수 있다. li::before /*요소 앞 부분에 추가*/ li::after /*요소 뒷 부분에 추가*/ 그리고 자식 요소 중 원하는 요소를 선택 할 수있다. 방법은 아래와 같다. li::first-child::after ㄴ first-child : 첫번째 자식요소 li:nth-child(2)::after ㄴnth-child(2) : 두번째 자식요소

[CSS] 폰트 적용 방법 3가지

2021. 12. 25. 00:08 공부/HTML, CSS

첫 번째로 ttf, otf파일로 직접 적용하는 방법이 있다. 우선 font-face로 폰트를 추가해줄 수 있고, 요소에서 font-family:지정한 이름으로 사용할 수 있다. @font-face { src:url(./fonts/Cafe24Ohsquare.ttf); /*폰트 경로 지정*/ font-family: "cafe24ohsquare"; /*폰트 이름 지정*/ } 구글 폰트로 적용 구글에서 제공하는 폰트를 다운로드할 필요 없이 가져와서 사용할 수 있다. 원하는 폰트를 선택 후 복사해서 가져오기만 하면 된다.html, css 중 원하는 걸 선택 후 가져올 수 있다. 어썸 폰트 어썸 폰트는 폰트 보단 아이콘, 이미지 등을 사용하기 위해 주로 사용한다. 사용하기 위해선 라이브러리를 먼저 세팅 해주어야 한..

[CSS] position 속성

2021. 12. 21. 00:22 공부/HTML, CSS

position의 종류 : static, relative, absolute, fixed static : 모든 속성의 기본값, 움직이지 않는다. relative : 현재 위치에서 ~ 만큼. 또는 부모 요소로써의 기준점으로 사용된다. absolute : 상위 요소 기준으로 ~만큼. fixed : 화면에 고정된다. (팝업, 검색창 고정 등에 사용) relative, absolute의 관계 아래처럼 position:absolute를 사용하였지만, 상위 요소를 지정하지 않을 경우에는 태그를 기준으로 움직이게 된다. position:absolute left:10px top:10px /* absolute의 상위 요소 기준으로 ~만큼 이동한다. */ 이에 대한 해결방법은 당연하게도 기준으로 잡을 수 있는 부모 요소를 ..

티스토리툴바