목록HTML & CSS/HTML, CSS 정리 (6)
개발자입니다
[HTML] 노마드코더 - HTML로 모달창 코딩하기
HTML, CSS, 자바스크립트로 길게 코딩해야 했던 모달 창을 HTML 코드로 간단히 만들 수 있다. 태그를 사용해 만든다. button value="close" 로 지정하면 닫기 버튼 구현된다. pseudo 선택자 backdrop 으로 모달창 뒷부분 배경색 변경 가능하다.
CSS 유용한 사이트 모음
-선택자 지정 게임 : flukeout.github.io -CSS 속성 상속 여부 : https://www.w3.org/TR/CSS21/propidx.html -CSS 컬러 참고 사이트: https://www.w3schools.com/css/css_colors.asp -의미없는 텍스트 만드는 사이트(ipsum generator 검색): https://www.lipsum.com/feed/html -flexbox 여러가지 테스트 가능 사이트: https://codepen.io/enxaneta/pen/adLPwv -W3schools 에서 미디어쿼리 문법 확인 : https://www.w3schools.com/css/css3_mediaqueries.asp -HTML/CSS 사용해도 되는지 확인하는 통계 사이트 ..
flex로 하려고 몇시간동안 해봤는데 안돼서 아래 방법으로 했다. position + transform 사용하기 .in3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 이 방법을 추천드리는 이유는 위에서 언급했던 단점들을 모두 극복한 방법이기 때문입니다. 코딩은 살짝 더 복잡해도 부모 요소의 div가 사이즈가 변경되어도, 위치가 변경되어도, 또는 자식 요소의 div 크기가 변경되어도 늘 정중앙에 배치됩니다. 그냥 공식처럼 외워두시면 될 것 같습니다. 포지션의 기준점은 div의 사각형을 화면상에서 바라봤을 경우 왼쪽 상단 꼭지점이 됩니다. 여기를 좌측으로 50% 옮기고 위에서 50% 아래로 배치하면 가운데의 di..
투명도 설정하기(opacity), 수직 정렬(z-index)
■ opacity(투명도) https://developer.mozilla.org/ko/docs/Web/CSS/opacity 불투명도를 나타내는 것으로 뒤쪽 콘텐츠가 숨겨지는 정도에 따라 0~1로 설정한다. 0 : 뒤쪽 콘텐츠가 완전 보임. 1 : 뒤쪽 콘텐츠가 완전 가려짐 div { background-color: yellow; } .light { opacity: 0.2; /* 배경 위로 겨우 볼 수 있음 */ } .medium { opacity: 0.5; /* 배경 위로 조금 더 잘 보임 */ } .heavy { opacity: 0.9; /* 배경 위로 뚜렷하게 보임 */ } 겨우 보이는 글 좀 더 잘 보이는 글 쉽게 보이는 글 :hover 시 다른 불투명도 적용 img.opacity { opacity..
CSS 이미지(절대경로 vs 상대경로)
이미지 경로 절대 경로 절대경로란, 아마 지정되어 있어 변경할 수 없는 경로를 뜻한다. 페이지 안에 다른 서버에 있는 이미지나 페이지 등의 파일을 연결 시킬때 사용한다. ex) 사이트 바로가기 상대 경로 상대 경로란, 상대적으로 변경될 수 있는 경로를 말한다. (1) 현재 파일을 기준으로 동일 텍스트위치로 연결되는 경우 아래와 그림과 같은 폴더 구조를 가진 웹사이트에서 index.html 파일에 favicon.png를 연결 시키려고 한다. index.html 파일이 저장된 위치를 기준으로, favicon.png 파일은 동일한 위치에 저장되어 있기 때문에 파일명과 확장자를 함께 기재해주면 된다. index.html 파일 소스 중 (2) 현재 파일을 기준으로 하위 폴더로 연결되는 경우 위와 같은 그림과 같이..