💻 더 나은 개발자 되기 69
-
시맨틱 태그란? 와 기능은 동일하지만, 콘텐츠의 특정 의미가 담겨있는 태그를 의미하는데요. div는 어디든 사용해도 무방하지만, 시맨틱 태그는 해당 태그에 의미를 담고 있는데요. 이 엘리먼트의 역할이 무엇인지 보다 명확하게 드러내주는 것이라고 볼 수 있을 듯 해요. 예를들어, header에는 페이지의 머릿글로 제목이나 로고 등등을 포함하고 있고, nav는 내비게이션이나 목차, section은 본문에 포함된 다양한 내용들을 나눈것, footer에는 하단 바닥글로 저작권이나 회사 정보 등등이 담겨있어요. 그럼, 이런 시맨틱 태그를 사용하게 되는 장점을 알아봅시다 :) 시맨틱 태그의 장점 검색엔진 최적화 의미 있는 태그를 통해 검색시 정확한 구조 분석에 도움을 주어 사이트 검색 시 노출 순위를 높일 수 있습니..
-
a태그를 텍스트 그대로 사용 하는 경우도 있지만, 마치 버튼처럼 만들어서 사용하는 경우가 굉장히 많다. a태그를 이용해서 버튼처럼 활용하는 css를 공유해보려고 한다. .aButton{ cursor: pointer; text-decoration: none; border-radius: 8px; height: 50px; width: 130px; padding: 16px 32px; text-align: center; background: #6d6afe; color: #ffffff; font-weight: 600; font-size: 17px; } 위 코드를 순서대로 설명하자면- cursor: pointer; : a태그의 경우엔 마우스를 대면 기본이 손 모양(pointer)으로 되니 생략해도 되지만, 마우스를 ..
-
결론부터 말하면, 나는 이걸 해결 못해서 다른 테마를 쓰기로 했다... 꼭 이걸 써야 한다! = 뒤로가기 다른것도 있나? = 끝까지 읽기! git-bash-for-mac.sh 설치 중 오류가 발생되었다. WARNING: this script is deprecated, please see git-completion.zsh 앞에는 권한오류가 뜨기도 해서 설정을 바꿔주었는데, 이번에는 이 오류다.. 이 스크립트가 권장되지 않는다고 하는데, macOSX가 최신 업댓에서 bash에서 zsh로 변경 되어서라고 한다. brew를 설치해두었기에 그걸로 실행을 해보았다.(결과는 이걸로 한 건 아니다..) brew install bash-completion 인스톨은 되었으나 크게 변한게 없어보인다...ㅠㅠ 그리고 터미널-..
-
display : grid; 를 먼저 사용한 뒤 아래 속성들을 추가로 부여할 수 있다. 격자 나누기 - grid-template-rows(columns) 간격 - gap 크기 미리 정하기 - grid-auto-rows(columns) 원하는 위치에, 여러 칸에 걸쳐서 배치 - grid-row(column), span 이름으로 배치 - grid-area, grid-template-areas 격자 나누기 grid-template-rows : 100px 200px 300px -> 첫번째, 두번째, 세번째 각각의 너비를 설정 grid-template-columns : 100px 200px 300px -> 첫번째, 두번째, 세번째 각각의 높이를 설정 grid-template : rows와 columns를 한 번에..