개발브롞으

오늘은 html에서 사용되는 다양한 크기 단위 중 em과 rem에 대해 알아볼 것이다. [ em과 rem ]em과 rem은 글자 크기가 크기의 단위가 되는 것이다. [ em ]em은 부모태그의 글자 크기가 단위가 되는 것이다. 아래 이미지를 예시로 설명하자면 부모태그의 글자 사이즈가 16px일 때1em이면 16px이므로 아래 이미지와 같이 2em이라고 하면 32px이 되는 것이다. [ rem ]rem은 html의 최상위 글자 크기가 단위가 되는 것이다. 아래 이미지를 예시로 설명하자면 부모태그보다 상위의 태그가 20px일 때1.5rem이면 30px이 되는 것을 확인할 수 있다.

오늘은 오픈그래프의 종류에 대해 알아볼 것이다. [ 오픈그래프 종류 ]og:title - 페이지의 제목이 무엇인지 정해주는 것 og.url - 인터넷 상에서 이 페이지의 고유한 주소 og.type - 해당 페이지가 어떤 유형인지 정해주는 것 og.image - 미리보기에서 보여줄 이미지를 정해줌 og. description - 제목 밑에 들어갈 설명을 정해줌 [ 더 많은 오픈 그래프에 대한 정보 ]https://ogp.me/ Open Graph protocolThe Open Graph protocol enables any web page to become a rich object in a social graph.ogp.me [ 페이스북 공유 디버거 ]위에서 만든 오픈그래프를 보여주도록 함https:..

이번 글은 요소를 없애는 2가지 방법 display:none과 visibility:hidden에 대한 설명글이다.  [ 설명 예제 ]아래 예제는 빨간색 border에 마우스가 hover될 경우 검정색 말풍선이 뜨는 구조이다.이때 여러개의 말풍선이 배치되어져 있을 때 첫번째 border에 hover되어 해당 말풍선이 나오고 두번째 말풍선에 마우스가 hover되면 첫번째 말풍선은 사라져야하는 구조일 경우의 상황이다.  이럴 경우, 첫번째 말풍선의 존재를 없애줘야한다.없애는 방법으로는 display : none;과 visiblity : hidden;이 있다.display : none : 자리값과 존재 모두 사라지게 하는 것visibility : hidden : 자리값은 유지하되 존재 자체를 사라지게 하는 것 ..

이번 글은 인접선택자에 대한 설명글이다.  [ 인접선택자란? ]인접 선택자인 +와 ~는 특정 요소 뒤에 오는 형제 요소를 선택할 때 사용된다.둘 다 형제 관계에 있는 요소를 선택할 때 쓰이지만, 선택할 수 있는 요소의 범위가 달라 서로 다른 상황에서 사용된다.  [ 인접선택자 + ]+는 특정 요소 바로 다음에 오는 형제 요소 하나만 선택할 때 사용된다. 아래래 예제에서는 h1 요소 바로 뒤에 나오는 p 요소가 있을 때만 선택하여, 해당 p 요소의 텍스트 색상을 파란색으로 설정합니다.h1 + p { color: blue; }[ + 사용 예시 ]특정 요소 뒤의 첫 번째 요소만 스타일을 적용하고 싶을 때(ex. 제목 요소 바로 뒤에 나오는 설명 문단에만 스타일을 적용하고 싶을 때 유용함)   [ 인..

이번 글은 태그를 가로로 배치하는 방법에 대한 설명글이다.    방법 1 ) float : left.gnb li { box-sizing: border-box; float:left; width: 120px; text-align: center;}  방법 2 ) display : flex=> display : flex로 가로 정렬을 해준 뒤 flex를 통해 일정한 비율로 간격조정을 해준다.gnb { display: flex;}.gnb li { flex:1; text-align: center;}

이번 글은 요소에 position:absolute를 적용하였을 경우 display 속성이 어떻게 변화되는지에 대한 설명글이다.   [ 설명 예제 ]아래 실행결과와 코드를 보면 사각형을 그리는데 사용된 태그의 경우 display의 block속성을 가졌다.따라서 아래 사진과 같이 자식요소에 해당하는 사각형들이 세로로 배치된 block속성의 형태인것을 확인할 수 있다. [ html ]  [ css ]body { display: flex; justify-content: center; align-items: center; height: 100vh;}.parents { background-color: green; width: 500px; hei..

오늘은 z-index에 대한 글이다.  [ z-index란? ]요소를 원하는 순서대로 배치할 수 있게 한다.숫자가 작을수록 상단에 배치된다.position속성의 absolute일 경우에만 사용된다. [ 예제 ]현재 아래 사진을 보면 텍스트만 보이는 것을 확인할 수 있다.하지만 텍스트 아래에는 이미지 한장이 겹쳐져 있다.해당 이미지(클래스명 front)를 가장 앞으로 나오게 z-index에 1을 주면 결과는 아래 사진과 같다..front { z-index: 1; /* 앞으로 당기기 */}

이번 글은 웹페이지에 아이콘을 쉽게 넣어 사용할 수 있는 부트스트랩 아이콘에 대한 사용 설명글이다.https://icons.getbootstrap.com/ Bootstrap IconsOfficial open source SVG icon library for Bootstrapicons.getbootstrap.com 1) 해당 사이트에 들어가서 Install 눌러주기 2) CDN에 코드 두개를 각각의 위치에 알맞게 복사 후 붙여넣기위에 있는  3) 원하는 아이콘 선택 후 클릭 4) 선택한 아이콘의 i 태그를 복사한 후 html의 원하는 곳에 붙여넣기 [ html ]  [ 웹에서 실행한 결과 ]