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

[html] 주석 달기
안녕하세요. 플입니다. 오늘은 html에서 주석을 달아보겠습니다. 1. 주석 내용 주석 내용은 보통 홈페이지 화면에서는 보이지 않지만 메모할 말 등을 적어둡니다. 말 그대로 주석이죠. 주로 부가설명을 하거나 저는 제목 대신 사용하기도 합니다. 이미지에서 적은 All은 포트폴리오 페이지에서 모두에 해당하는 부분으로 코드만 보고도 위치를 알아보기 편하게 주석을 넣어주었습니다. 2. 주석 적기 주석은 시작할 때는 를 적어서 끝내줍니다. 이 주석은 여러 줄도 주석 처리가 가능하기 때문에 코드를 짜두었지만 당장은 필요가 없고 미래에 필요할지도 모를 경우 전체를 주석 처리해줄 수도 있습니다. 그럼 이만. 총총.
![[html] 주석 달기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/c2qv8E/btqz1A7Wgz5/mS9rWScUN9dpZmevFdlbBk/img.jpg)
[css] 마우스 포인터 변경
안녕하세요. 플입니다. 오늘은 마우스를 올렸을 때 손가락 모양으로 보이게 만들어 보겠습니다. 1. 기본 사항 체크 마우스 포인터가 캡처로 보이지 않아서 핸드폰으로 촬영했어요. 태그가 아니면 마우스를 요소에 올렸을 때 손가락 모양으로 나오지 않습니다. 마우스가 손가락 모양으로 변하는 것은 사용자의 클릭을 유도하는 것인데, 태그가 아니어도 필요한 경우가 있습니다. 태그가 아닌 다른 태그는 기본적으로 마우스 포인터가 변하지 않으니 따로 값을 줘야 합니다. 2. 마우스 포인터 변경 button{ cusor:pointer; } 여기서 마우스 포인터를 변경하는 부분은 특정 요소에 마우스를 올렸을 경우에만 한정됩니다. 마우스 모양을 손가락 모양으로 바꾸려면 cusor를 사용하면 됩니다. 값을 pointer를 입력하면..
![[css] 마우스 포인터 변경](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/GV7kk/btqzYTTCr2k/R7TO48LXOzcKAo51m4OEgK/img.jpg)
[css] 글자 가운데 정렬 하기
안녕하세요. 플입니다. 오늘은 css를 이용해 글자를 가운데 정렬해보겠습니다. 1. 글자 준비 가운데 정렬을 적용할 글자를 준비합니다. 어떤 태그를 사용하던 상관없지만 정렬을 시켜주려면 block태그를 사용해야 합니다. block태그 중 글자에는 주로 , , 등을 사용합니다. 2. 가운데 정렬 h3{ text-align:center; } 글자의 정렬은 text-align을 사용해 조절해줍니다. 가운데 정렬이니 text-align의 속성 값을 center로 입력해줍니다. 코드를 입력하고 새로고침을 하면 글자가 가운데로 정렬된 것을 알 수 있습니다. 3. 다른 정렬 h3{ text-align:left; } h3{ text-align:right; } 글자 정렬의 기본 설정값은 좌측 정렬입니다. 속성 값을 입력..
![[css] 글자 가운데 정렬 하기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/9GGm0/btqzXhlXr9K/bRGE79g7ZbzOru1s7O2ke0/img.jpg)
[html] 링크 새창열기 설정
안녕하세요. 플입니다. 오늘은 링크를 눌렀을 때 새창에서 열리게 설정해보겠습니다. 1. 태그로 링크 만들기 먼저 를 이용해 주소를 적어줍니다. 하지만 주소만 적어주면 현재 창에서 주소가 열려 지금 보는 사이트가 없어져버립니다. 2. target설정 (그냥 이미지일 뿐 target속성을 넣는다고 디자인이 변하지는 않습니다.) 태그에 target속성을 추가해 줍니다. target은 링크를 열 때 어떻게 열지 정하게 해줍니다. 간단하게 현재 창과 새창으로 열기 등이 있습니다. 새 창으로 여는 속성 값은 _blank입니다. 앞에_(언더바)를 꼭 입력해주세요. 3. 확인 이제 태그를 클릭해 새 창으로 열리는지 확인해봅니다. 창이 하나 더 생기면서 새 창에서 링크가 열리는 것을 알 수 있습니다. 그럼 이만. 총총.
![[html] 링크 새창열기 설정](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/vSsu2/btqzOLWVXaq/vZc86MF38b3XhU0TrK30V0/img.jpg)