개발나라 스용공주

이번 글은 요소를 없애는 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 ]  [ 웹에서 실행한 결과 ]

이번 글은 css 그림자에 대한 글이다. [ 그림자 구조 ]그림자는 아래 구조와 같다.box-shadow : x축 y축 번짐정도 색상;  [ 그림자 활용 ]아래 코드와 같이 그림자를 작성하면 그림자가 부자연스럽다..app-ui { box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); transition: 0.5s;} 하지만 hover시 그림자 효과를 아래 코드와 같이 추가하여 만들어주면 더 요소들의 그림자가 생긴 것처럼 만들어져 더 자연스러운 그림자 효과를 만들 수 있다..app-ui:hover { box-shadow: -50px 100px 20px rgba(0, 0, 0, 0.3);}

이번 글은 transform 속성 작성 시 실수할 수 있는 부분에 대한 글이다. 아래 코드와 같이 작성되어 있는 경우 두 transform 중 아래에 있는 transform이 최종적으로 실행되며 위의 transform을 덮어쓰게 된다.transform: rotate(-30deg);transform: skew(20deg); 따라서 아래 코드와 같이 한 줄로 작성해줘야한다.transform: rotate(-30deg) skew(20deg);