[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의 상위 요소 기준으로 ~만큼 이동한다. */ 이에 대한 해결방법은 당연하게도 기준으로 잡을 수 있는 부모 요소를 ..
[HTML] audio, video, embed 태그
2021. 12. 21. 00:12
공부/HTML, CSS
음악과 비디오를 html에 삽입하는 방법을 배웠다. 음악, 비디오 등은 , , 같은 태그로 삽입할 수 있다. 위와는 별개로 embed 태그로 video를 삽입 할 수 있는데, 유튜브 영상도 이 태그로 삽입하게 된다. 위처럼 embed 태그로 유튜브 영상을 삽입 할 수 있는데, 주소창의 주소를 그대로 입력하게 되면 오류가 발생한다. 따라서 주소를 수정해주거나, 유튜브 퍼가기 기능을 사용해서 삽입할 수가 있는데, 주소를 수정해주는 방법은 다음과 같다. https://www.youtube.com/embed/watch?v=영상 고유번호 위 주소에서 embed를 추가, watch?v= 부분을 제거하면 된다. 예시) https://www.youtube.com/embed/영상 고유번호
[학원 과제] 관람 등급 화면 만들기
2021. 12. 17. 17:34
공부/HTML, CSS
이미지 스프라이트를 사용하여 관람 등급 이미지를 추가했다. HTML에서는 아래와 같이 작성했다. 12세이상 관람가 15세이상 관람가 청소년 관람불가 전체 관람가 wrap으로 큰 틀을 만들고 아래에 div 태그로 나누었다. CSS에선 아래와 같이 작성했다. /*이미지 공통 속성들*/ .age12, .age15, .age19, .all { background-image: url(./img/sp_rank.png); background-repeat: no-repeat; margin-right: 5px; margin-left: 5px; width: 18px; height: 18px; float: left; } #wrap { width: 800px; height: 60px; border-style: ridge; }..
[학원 과제] 구글 리트리버 검색 미리보기 만들기
2021. 12. 17. 16:19
공부/HTML, CSS
구글에 리트리버를 검색하면 나오게 되는 미리 보기 화면을 만드는 과제다. 구글에선 div를 사용했지만 학원에서 배운 ul,li 태그를 사용하여 만들었다. HMTL에선 아래와 같이 작성했다. 대표종 35개 이상 항목 더보기 래브라도 리트리버 골든 리트리버 플랫 코티드 리트리버 체서피크베이 리트리버 CSS에선 아래와 같이 작성했다. /*기본 스타일 제거*/ * { margin: 0; padding: 0; } ul { list-style-type: none; } a { text-decoration: none; } /*본문*/ #wrap { width: 500px; height: 200px; margin: 30px; } #header { width: 500px; height: 50px; } #header>h1 ..