개발나라 스용공주

이번 글은 요소를 없애는 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 ]=> 버튼 border 생성 , 이미지 배열, 이미지를 담고 있는 자식요소, 부모요소=메인(여기에서 로테이션 되며 보여짐)이때 위의 사진과 같이 이미지를 배열할 때 생기는 margin은 font-size : 0를 통해 없애줄 수 있다.   [ 제작과정 2 ]=> 버튼 완성하기 : radio버튼과 버튼 border 연결하기, 버튼에 따른 이미지 position값 변화   [ 제작과정 3 ]=> overflow : 부모 요소(빨간 박스)에 overflow 속성의 hidden 속성값을 통해 빨간색 영역에서 오버되는 파란색 박스 영역을 감춰줌  [ 제작과정 4 ] => transition 적용 : 움직이는 대상인 이미지에 transition을 주어 스무스하게 만듬  [ ..

[ 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; /* 앞으로 당기기 */}

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