본문 바로가기

분류 전체보기26

css 선택자 기본 -css 선택자 개요 css는 html문서의 스타일을 꾸미는 데에 사용됩니다. 글자의 크기, 스타일, 색상 부터 요소의 너비, 높이, 위치 등 여러가지 스타일을 줄 수 있습니다. 또한 애니메이션과 반응형 디자인, 자바스크립트와의 상호작용도 가능합니다. 주로 태그이름, 클래스와 아이디 등으로 요소를 선택해서 한번에 여러개의 요소에 스타일을 부여하게 됩니다. 이 때 클래스와 아이디 뿐만 아니라, 여러 선택자가 있고 우선순위도 존재합니다. css 선택자로 html 요소를 선택하고, 뒤에{스타일 줄 내용;} 원하는 요소에 대한 스타일 내용을 쓰는 데 목적이 있습니다. -css 선택자 우선순위 우선순위는 일반적으로 css 문서의 아래로 갈 수록 우선순위가 생깁니다. 또한 선택자를 구체적으로 쓸 수록 우선순위가 높.. 2021. 8. 20.
html 태그 자주 쓰이는 태그 순위 -html 태그 어떤걸 주로 쓸까? advancedwebranking닷컴에서 매긴 자주 사용되는 태그 순위입니다. 아래로 갈 수록 덜 쓰이는 태그지만 순위에 들었다는 것만으로도 전세계 사람들이 가장 많이 쓰는 html 태그 종류 라고 할 수 있습니다. html 문서의 최상위 부모이자 태그입니다. html 태그 중에 가장 많이 쓰일 수 밖에 없겠죠? html 문서의 제목, 링크, 메타데이터 등을 포함하고 있습니다. 문서의 기본 정도라고 할 수 있습니다. 문서의 콘텐츠를 담은 영역입니다. 콘텐츠를 담는 태그이니 위의 태그들과 마찬가지로 필수적인 태그입니다. 문서의 제목을 나타내며, 브라우저 창에 나타납니다. 해당 문서에 대한 메타데이터로 head태그 안에 속해 있습니다. 문자셋이 대표적입니다. 요소를 담을 .. 2021. 8. 19.
css inline, block, inline-block element -인라인 엘리먼트 , , 과 같은 태그는 css inline element입니다. 주로 박스 안의 요소로 들어가게 됩니다. 다른 엘리먼트에 비해 정렬이 까다롭습니다. 메모리에 열 단위로 저장됩니다. 내용이 담긴 크기만큼 영역을 차지합니다. 줄바꿈이 없고, 문장 중간에 들어갈 수 있습니다. 내용물의 크기만큼 영역을 점유하기 때문에, 임의로 너비나 높이를 설정할 수 없습니다. 패딩, 마진도 마찬가지입니다. 따라서 블록이나 인라인 블록 엘리먼트로 성질을 변경하거나 다른 성질을 가진 부모 안에 넣어서 사용하는 경우가 많습니다. a태그나 img, span과 같은 css inline 태그를 div나 p같은 태그안에 넣어서 사용합니다. -블록 엘리먼트 , , , , 과 같은 태그는 block element 입니다. .. 2021. 8. 19.
vscode 단축키 및 환경설정 vscode live server, FTP, ftp simple, Emmet, Beautify -vscode 단축키 vscode로 효율적인 마크업을 할 수 있는 단축키( emmet )를 안내해드리겠습니다. 따로 설정하지 않아도 vscode 단축키는 기본으로 설정되어 있습니다. 선택한 영역을 주석 처리합니다: 컨트롤+/ 들여쓰기와 내어쓰기를 합니다: 탭, 시프트+탭 HTML DTD 기본양식을 빠르게 입력합니다: ! 누르고 탭 빠르게 태그를 생성합니다: p, a, img등의 태그 이름 입력 후 탭 선택된 영역을 위 또는 아래로 복사해줍니다: 시프트+알트+방향키 여러 열을 한꺼번에 수정할 수 있습니다: 시프트+알트+드래그 또는 마우스 휠 드래그 부모 자식 태그를 한번에 만들 수 있습니다: ul>li*3과 같이 부모 자식 될 태그를 입력 후 탭 클래스, 아이디와 함께 태그를 생성합니다: div.mydiv.. 2021. 8. 19.

티스토리툴바