CSS
-
after & before카테고리 없음 2022. 5. 24. 00:30
가상 요소 별도의 class를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있다. after 실제 내용 바로 뒤에서 생성되는 자식요소 before 실제 내용 바로 앞에서 생성되는 자식요소 content="" 가짜 속성으로 after와 before를 사용할 때, 같이 쓰인다. after & before를 사용하는 곳을 살펴보자 GNB의 내용 구분 bar 생성 웹페이지 상단의 header부분에서 gnb 내용을 구분할 때 사용하는 bar를 생성할 수 있다. after before 앞과 뒤에 추가 정보를 생성 after before 둘다 같은 속성과 같은 값을 주었을 때, 차이점은 앞에 가상요소가 생기는지 뒤에 생기는 지의 차이다. 가상요소를 사용할 수 없을 때 대체요소(img, video 등)는 가상요소를..
-
block? lnline?CSS 2022. 4. 29. 18:57
블록과 인라인 요소 알아보기 html의 태그들은 어떠한 형태로 공간을 차지하는가에 따라 block과 lnline로 나누어진다. block은 한 단락을 전부 차지하는 것처럼 보인다. inline은 왼쪽부터 차근차근 줄을 차지하면서 보인다. block 요소 대표적인 블록 요소로는 p태그, h1태그(헤딩태그), 가 있다. 블록 태그는 한 단락을 전부 차지하기 때문에 항상 새로운 라인에서 시작한다. inline 요소 인라인 요소는 a태그, img, span태그 등이 있으며, 같은 줄에 여러 개가 함께 배치가 가능하다. 상하의 마진, 크기(width, height)를 사용할 수 없다. 또한 블록 요소 안에 삽입되어 같이 쓰인다. 블록 태그와 인라인 태그의 margin 블록 태그와 인라인 태그 둘 다 마진 40px..