WEB

WEB/CSS
[CSS] ::before / ::after
이번 포스팅에서는 추가 컨텐트를 삽입하기 위해서 사용되는 ::before과 ::after에 대해서 알아보겠습니다. Pseudo Element ::before과 ::after는 CSS에서 소위 pseudo element라고 하는데요. 일반적인 CSS 선택자(selector)로는 지정할 수 없는 미세한 영역을 선택하기 위해서 사용됩니다. 본 포스팅에서 다룰 ::before과 ::after뿐만 아니라 ::first-letter, ::first-line, ::selection, ::marker 등 CSS에는 다양한 pseudo element가 있습니다. pseudo element는 선택자 뒤에 붙여주는데 CSS3 문법 상 : 기호를 사용하는 pseudo class와 구분해주기 위해서 원칙적으로는 :: 기호를 사..
→2021.08.20
WEB/CSS
가상 클래스 선택자
개요 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다. :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때 (input 태그 등) :first - 첫번째 요소 :last - 마지막 요소 :first-child - 첫번째 자식 :last-child - 마지막 자식 :nth-child(2n+1) - 홀수 번째 자식 위는 대표적인 가상 클래스의 예시이며 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 HTML, CSS 및 JavaScript의 코드를 효과적으로 줄일 수 있습니다. 사용법 ...
→2021.08.05
WEB/CSS
Display&Position
Display&Position div:블럭 레벨이라 한줄에 하나씩 나온다 span: inline레벨이라 공간만되면 한줄에 여러개 나온다 display:레벨 기본값 변경이 가능하다 inline:한줄에 여러개가 들어갈수잇다 inline-block:한줄에 여러개가 들어갈수잇는 box block:한줄에 하나만 들어가는 box container box Position static: 기본적으로 가지고 잇고 HTML에 정의된 순서대로 브라우저 상에 자연스럽게 보여진다 relative: 원래 잇어야하는 자리에서 지정한 위치까지 이동 absolute: 내 아이템이 담겨 잇는 박스 안에서 원하는 위치까지 이동한다 fixed: 박스를 벗어나 윈도우 안에서 지정위치까지 이동 (flex-flow:아래 내용을 묶어서 사용가능 [..
→2021.08.04
WEB/Domain
DNS Record Type 레코드 종류와 역할
Dns 레코드 유형 및 간단한 dns zone 파일 분석 넷상의 존재하는 네트워크 장비들은 기본적으로 ip를 통해 통신을 하게 됩니다. 다만 이용자, 즉 우리 사람들은 모든 서버의 ip를 외울 순 없습니다. 이를 간단하게 외울 수 있도록 도와주는 것이 도메인(domain)입니다. ip를 외우는 것 대신 도메인을 외움으로써 좀 더 간단하게 원하는 웹페이지, 필요한 서버 등을 찾을 수가 있습니다. 이 과정에서 ip와 도메인을 매칭해주는 역할을 하는 서버가 필요한데 이를 도와주는 것이 DNS(Domain Name Service) 입니다. 내가 구매한 도메인의 네임서버를 지정해주면 해당 네임서버에서 갖고 있는 dns의 레코드를 통해 이용자가 찾고자 하는 도메인을 ip로 변경하여 통신을 하도록 도와주는 것입니다...
→2021.08.04
WEB/HTML
[HTML]Emmet 사용법
Emmet이란? 강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인 Emmet (에밋)을 사용하면 HTML & CSS의 작업 속도를 엄청나게 향상시킬 수 있다!! 👏🏽👏🏼👏🏻 VS Code는 emmet을 기본적으로 지원하고 Tab키를 통해 사용한다. 🧶 HTML 구조화 하기 (Nesting operators) Emmet의 문법을 활용하여 요소들의 구조를 간편히 생성할 수 있다. Emmet 문법 요소 (Elements) 생성 생성하려는 요소의 이름을 입력한 뒤 tab을 누르면 태그가 자동 생성된다. Emmet에는 미리 정해진 태그 이름이 없다. 즉, 아무 이름으로나 태그를 생성할 수 있다.(에디터에 따라 그렇지 않은 경우도 있다.) html:5[tab] 결과: helloworld[..
→2021.07.31

• 이전
• 1
• 2
• 다음