'CSS' 태그의 글 목록 (9 Page)

[css] 레이어 설정

안녕하세요. 플입니다. css에서 위치 순서를 정해보겠습니다. 1. z-index ul{ z-index:10; } 이미지처럼 두 개 이상의 요소가 겹쳤을 때 순서를 정해주는 코드가 z-index입니다. 포토샵을 사용하신다면 포토샵의 레이어와 같은 원리라고 이해하시면 됩니다. z-index의 숫자가 클수록 위쪽으로 올라옵니다. 2. 범위 ul{ z-index:-10; } z-index의 범위는 정수로 -(마이너스)까지 포함합니다. 수를 -10으로 줬을 때 뒤쪽으로 보내져 보이지 않게 된 것을 알 수 있습니다. 자리를 표시하는 부분이 살짝 보이지만 요소는 보이지 않죠. 2020년 새해 복 많이 받으세요~! 그럼 이만. 총총.

coding/html + css · 2020. 1. 1. 07:30

[html] 태블릿 사이즈 설정하기

안녕하세요. 플입니다. 오늘은 html에서 태블릿 사이즈를 설정해보겠습니다. 1. css 불러오기 우선 태블릿 사이즈를 코딩해준 css를 불러옵니다. 일반 css를 불러오는 것과 동일하게 link를 이용해 불러옵니다. rel값은 stylesheet를 입력해주세요. type은 text/css입니다. href는 폴더 경로를 입력해주세요. 저는 css폴더 안에 있어서 css/파일명입니다. 2. media css를 불러온 link 안에 media를 입력해주세요. 값은 only all and (max-width:1297px)을 입력해줍니다. 여기서 max-width값은 브라우저를 줄여보면서 설정해주세요. max-width값이 설정된 기준 아래에서 불러온 css가 적용됩니다. 3. 확인 F12 혹은 오른쪽 클릭 후..

coding/html + css · 2019. 12. 13. 07:30

css주석 처리 방법

css에서 주석 넣는 방법에 대해 알아봅시다! 주석은 개인 작업할 때는 물론 협업 시에도 반드시 필요한 기능이랍니다. 1. 주석 /* 주석 */ css의 주석은 /*로 시작해서 */로 닫아줍니다. 안쪽 코드가 모두 주석 처리되어서 실제 화면에 반영이 안 됩니다. 에디터 프로그램을 쓴다면 주석 부분과 실제 반영되는 코드의 색상이 달라서 알아보기 편하실 겁니다. 간단한 문구 등을 주석 처리하거나 코딩을 가리고 싶을 때 사용합니다. 이런식으로 여러줄에서도 사용 가능합니다. + 번외 만약 scss를 사용하신다면 // 슬래시 두개로도 한 줄 주석 처리가 가능합니다. [같이 보면 좋은 글] [coding/editor] - vs code에서 코드 한 번에 주석처리하기 vs code에서 코드 한 번에 주석처리하기 코딩..

coding/html + css · 2019. 11. 29. 07:30

[css] 글자 가운데 정렬 하기

안녕하세요. 플입니다. 오늘은 css를 이용해 글자를 가운데 정렬해보겠습니다. 1. 글자 준비 가운데 정렬을 적용할 글자를 준비합니다. 어떤 태그를 사용하던 상관없지만 정렬을 시켜주려면 block태그를 사용해야 합니다. block태그 중 글자에는 주로 , , 등을 사용합니다. 2. 가운데 정렬 h3{ text-align:center; } 글자의 정렬은 text-align을 사용해 조절해줍니다. 가운데 정렬이니 text-align의 속성 값을 center로 입력해줍니다. 코드를 입력하고 새로고침을 하면 글자가 가운데로 정렬된 것을 알 수 있습니다. 3. 다른 정렬 h3{ text-align:left; } h3{ text-align:right; } 글자 정렬의 기본 설정값은 좌측 정렬입니다. 속성 값을 입력..

coding/html + css · 2019. 11. 23. 07:30

[css] 드래그 색상 변경

안녕하세요. 플입니다. 오늘은 드래그 색상을 변경해보겠습니다. 1. 기본 사항 확인 먼저 드래그 색상이라는 것은 글을 드래그했을 때 나타나는 색상을 말합니다. 기본으로 나오는 색상을 확인합니다. 많이 알고 계시듯이 드래그된 부분이 파랑 바탕으로 보이는 것을 알 수 있습니다. 2. ::selection ::selection{ background:#ea0e3c; } ::selection을 이용해 드래그 색을 변경해줍니다. ::selection에 배경색을 넣어주면 됩니다. 배경색은 background를 이용해 넣어줍니다. 3. 글자색 변경 ::selection{ color:white; } 글자색이 배경색에 묻혀서 잘 보이지 않는 경우가 발생합니다. 그런 경우를 위해 드래그했을 때 글자색도 지정해줍니다. 다른 ..

coding/html + css · 2019. 11. 16. 07:30

CSS 56