select 박스 value 값 가져오기

onchange 속성 사용 정렬 수량순 가격순 function selectSort(sortOp) { console.log(sortOp); }

HTML 실습3. 화면 구현하기

[출처] https://blog.naver.com/getinthere/222136112744 HTML 실습3 아래의 화면을 구현하시오. getinthere님의블로그 blog.naver.com New collection zuzu. about collections videos contact ENG * { padding: 0; margin: 0; box-sizing: border-box; } .background_box { display: flex; position: relative; } .background_img_box { display: inline; background-image: url("/vacation.jpg"); background-size: cover; background-position: c..

HTML 실습2. 화면 구현하기

[출처] https://blog.naver.com/getinthere/222136040486 HTML 예제2 아래의 화면 만들어봐요. getinthere님의블로그 blog.naver.com Add meals 🥪 All 🍕 Pizza 🥩 Meat 🥗 Veggies Featured meals Pasta Carbonara ➕ Lasagna ➕ * { padding: 0; margin: 0; box-sizing: border-box; } .title { margin: 50px 0 20px 20px; font-size: 35px; font-weight: 900; } .menu_box { display: flex; justify-content: flex-start; } .menu____box { align-item..

HTML 실습1. 화면 구현하기

[출처] https://blog.naver.com/getinthere/222136044132 HTML 실습1 아래의 화면을 구현하시오. getinthere님의블로그 blog.naver.com Good morning What are you eating today? search person_outline Oatmeal cookie Vecan 10 minutes 3 people 4.3 94 123 Recommended See all Pomegranate Juice Something I can't read Pomegranate Juice Something I can't read Pomegranate Juice Something I can't read Pomegranate Juice Something I can'..

HTML 9강.material icon

구글이 만든 아이콘 사이트이다. material.io -> 앱에서 사용하는 아이콘 https://materializecss.com/ Documentation - Materialize materializecss.com material css -> 웹에서 사용하는 아이콘 (이걸 사용) css꾸러미 여기에 원하는 아이콘이 없다면 font awesome을 찾아보자. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com font awesome은 google 다음으로 2등 ..

HTML 8강. position

박스가 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓이고 있다. 원래 자신이 위치해야 할 자리에 정적으로 들어가 있는 상태이다. 포지션이 static 이라는 말이다. 모든 태그들은 기본적으로(default) position : static 상태이다. 요소, 태그들 하나하나를 html에서는 dom 혹은 element라고 한다. 전체 바디는 document, 바디안의 모든 것을 object라고 한다. dom(document object model) : 문서 객체모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 포지션은 css로 위치제어가 가능하다. 하지만 static은 정적플로우로 위치 이동이 불가능하다. 위치 이동을 하기 위해서는 relative로 변경해야 한다. (위치를 상대적으..

CDN, position 실습

arrow_forwardCOSarrow_back Home HTML CSS React Django Link 1 Link 2 Link 3 * { padding: 0; margin: 0; box-sizing: border-box; } .header { display: flex; background-color: lightpink; height: 200px; color: white; font-weight: 600; font-size: 70px; justify-content: center; align-items: center; } .menu_box { display: flex; background-color: tomato; justify-content: center; align-items: center; heigh..

HTML 7강. 백그라운드 이미지

이미지를 넣을 때 div박스를 만들어 안에 넣는 것이 좋다. 이미지를 감싸는 박스로 고정되어 있으면 이미지의 크기가 조금만 바뀌어도 이미지가 손상될 일이 없다. 박스 안에 이미지를 넣는 방법은 다양하다. 우선 div태그 안에 이미지 태그를 사용해서 넣어볼 것이다. 자세히 보면 img_box 박스를 넘어서 이미지가 들어간 것을 볼 수 있다. 여기서 여러 가지 속성을 써보자. overflow:hidden; 박스를 넘어가는 사진을 잘라버리는 css 속성이다. (overflow:visible; 디폴트) 이미지 전체 화면을 넣기 위해 이미지에 클래스를 만들어줘서 width: 100% height : 100% 해주면 박스 크기에 맞게 이미지 크기가 변한다. 하지만 이미지의 비율이 깨지고 손상되기 때문에 좋은 방법은..

table 실습 2

HTML 6강. input 태그 디자인

3가지 버튼을 디자인해볼 것이다. * 최종 완성본 * 우선 button타입 input 태그를 3개 만들어준다. 내가 원하는 위치, 크기를 디자인하기 위해서는 원래 태그들이 가지고 있는 속성들을 모두 초기화해주는 것이 좋다. html의 모든 css 속성을 초기화하기 위해 style태그에 * { padding : 0px; margin : 0px; } 을 지정해놓자. 모든 패딩과 마진이 사라지고 따닥따닥 붙어있는 것을 볼 수 있다. 검색이라고 적힌 버튼에 우클릭하여 검사를 눌러보면 패딩과 마진이 모두 빠지고 border가 4면에 2씩 남아있는 것을 볼 수 있다. button이 가지고 있는 고유한 속성인데 만약 저 버튼의 높이를 50px로 주면 자동으로 border의 두께 4를 빼고 버튼의 순수 높이가 46px..