개발나라 스용공주

구조 : item이 3개 있고 그 위에 덮어질 텍스트 caption 또한 3개 존재 => 이들을 감싸는 items 존재display : 가로 배치를 위해 display : inline-block;중앙정렬하는 법 : item들이 inline-block이므로 items에 text-align : center;텍스트와 이미지 겹치기 : 이미지 위에 텍스트를 겹치는 것이므로 기준점을 이미지로 삼기 위해 position 부여를 이미지는 relative, 텍스트는 absolute 후 top과 left를 0으로 적용hover 요소 : hover 시 서서히 등장하기 위해 transition을 0.5s주고 transition을 적용하기 위해 display : none이 아닌 opacity로 보이지 않게 만들어줌 (opac..

이번 글은 요소를 없애는 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..

[ 1차 개발 - 기능 작동 구현 ]* 라디오 버튼 사용, 인접선택자를 사용할 수 있는 구조를 통해 버튼작동과 이미지 변경 구현=> 버튼 구조 : 라디오 버튼을 label과 연결 후 라디오 버튼 체크 여부에 따라 색상 변경 (최초의 버튼에 선체크)=> 이미지 변경 구현 : 라디오 버튼과 이미지를 연결한 후 해당 라디오 버튼의 체크 유무에 따라 체크된 버튼과 연동된 이미지의 display 값 변경 [ html ]  [ css ]body { display: flex; justify-content: center; align-i..

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