CSS_투명도 opacity, rgba 더보기 - opacity: 투명도를 조절하는 속성, 값은 0~1 - 1 : 완전 불투명, 밑에있는 내용이 안보임, 기본값 - 0 : 완전 투명, 위에있는 배경이 아예 안보임 - rgba : (red, green, blue, alpha) - red : 빨강색 색상정보, 0~255 - green : 초록색 색상정보, 0~255 - blue : 파랑색 색상정보, 0~255 - alpha : 투명도 안녕하세요. 괴발개발/Html+CSS 2021.06.14
CSS_반응형 페이지 더보기 화면크기에 따라서 페이지의 구성을 다르게 표현하는 페이지를 반응형이라고 함 해당 화면 크기일 때, 안에 있는 CSS를 적용 : - 생김새: @media 화면크기{ 선택자{속성들;} } - 생김새 해설 : @midea[미디어타입 and] 화면크기{ 선택자{속성들;} } - 미디어타입 - all : 모든 장치(기본값) - print : 프린터에 사용 - screen : PC, 태블릿, 스마트에 사용 - speech : 스크린리더기가 페이지를 읽는데 사용 - 화면크기 - (min-width : 값) : 값(ex:600px) 이상 - (max-width : 값) : 값(ex:600px) 미만 - @media를 이용하여 반응형으로 만들 때 배치 순서가 중요 min-width:600px => 최소 600너비.. 괴발개발/Html+CSS 2021.06.13
CSS_display, visibility, flex 더보기 - display - block - inline - inline-block - none : 요소를 안보이게 함. 요소의 위치를 없앰 - flex : float과 비슷한 효과 - visibility : 요소를 보여줄지 말지를 결정하는 속성 - hidden : 요소를 안보이게 함. 요소의 위치는 그대로 내버려둠. - flex : flex-grow, flex-shrink, flex-basis를 한번에 쓰는 속성 - flex-grow : 자식요소가 작아서 공간이 남을 때 어떻게 처리할지를 설정 - 0 : 기본값 - 1 : 모든 자식 요소들이 1이면 크기가 같음 - 양수 : 숫자가 커질수록 - flew-shrink : 자식요소가 커서 공간이 부족할 때 어떻게 처리할지를 설정 - 0 : 기본값 - 1 : 모.. 괴발개발/Html+CSS 2021.06.13
CSS_크기조절 resize 더보기 div로 상자를 만들어서 resize를 할 때, overflow:auto를 같이 써줘야지 작동함 - resize : 화면에서 요소의 크기를 조절하는 속성 - none : 크기를 조절할 수 없게 함 - vertical : 높이 조절 가능 - horizontal : 가로 조절 가능 - both : 가로 높이 조절 가능 괴발개발/Html+CSS 2021.06.13
CSS_다단(column-span모름) 더보기 - column-count : 다단 갯수 - column-gap : 단과 단 사이에 여백 - column-rule : 단 선 모양 - column-span : h태그가 포함되면 해당 부분에 단을 해제할지 말지를 결정하는 속성 - column-width : 한 단의 너비 도시어부3과 강철부대가 만났다 채널A 콘텐츠 유니버스 '도시어부3'와 '강철부대'의 만남은 방송 전부터 큰 화제를 모은 바 있다. 이날 방송에서는 양 팀의 불꽃 튀는 첫 만남이 흥미진진하게 펼쳐지며 앞으로 벌어질 낚시 대결에 대한 궁금증을 한껏 끌어올렸다. 첫 등장한 박군은 형님들을 무장해제 시키는 밝은 미소와 찐 리액션으로 현장을 접수했다. 흥겨운 트로트 가락으로 춤사위를 보이는가 하면 황충원과 함께 애교 넘치는 손가락 하트를 연.. 괴발개발/Html+CSS 2021.06.13
CSS_길이(max-width/height, min-width/height) 더보기 - width : 가로, 폭, height :세로, 길이 - min-width/min-height : (예: minimum 700px) - 가로/세로의 최소 길이를 설정 - 브라우저가 작으면 700px, 크면 100% - max-width/mas-height : (예: maximum 700px) - 가로/세로의 최대 길이를 설정 - 브라우저의 가로/세로의 길이가 max-width/max-height보다 작으면 브라우저의 가로/세로의 길이에 맞춰 설정됨 => 브라우저가 작으면 100%, 크면 700px 괴발개발/Html+CSS 2021.06.13
CSS_아이콘 예제 더보기 fontawesome이라는 사이트 가입 후, 주어진 링크를 받아서 바로 붙여넣기하면 script로 들어감. 사용하고싶은 아이콘 이름을 넣어주고 사용하면 끝! 더보기 position: absolute; top:-1px; right: -1px; => right -1을 하니까 위치가 오른쪽으로 바로 넘어왔어 (float right따위 필요도 없이.. ) 괴발개발/Html+CSS 2021.06.13
CSS_상단, 좌측 메뉴바 만들기 더보기 li>a{display:block;} => 메뉴클릭할때 클릭가능의 범위를 박스로 확장 메뉴1 메뉴2 메뉴3 더보기 .menu에서 padding0을하면 outside에 있던 list marker(모양)이 사라지는데, 혹시 모를 상황을 대비해서 list-style: none; 을 넣어서 marker를 없앴음 메뉴1 메뉴2 메뉴3 괴발개발/Html+CSS 2021.06.13
CSS_애니메이션 효과 더보기 -애니메이션 등록 @keyframs 애니메이션명{ 시간비율{속성1; 값1; 속성2; 값2;} //이전 시점에서 시간 비율까지 적용할 속성 시간비율{속성1; 값1; 속성2; 값2;} } - 애니메이션을 호출 선택자{ animation-name : 애니메이션명; animation-duration : 시간; // %로 쓸수있음 animation-iteration-count : 애니메이션반복횟수; //반복횟수는 숫자 or infinite } 꽝 호버 괴발개발/Html+CSS 2021.06.13
CSS_네이버 검색창 만들기 검색 더보기↓ 더보기 /*최신버전*/ input[name="query"]::placeholder{color: gray;} /*구버전*/ input[name="query"]::-webkit-input-placeholder{color: gray;} input[name="query"]::-ms-input-placeholder{color: gray;} input[name="query"]::-moz-placeholder{color: gray;} 괴발개발/Html+CSS 2021.06.13