멋쟁이사자처럼_FE_2기 실전 (1) - checkbox랑 select를 이쁘게 꾸미고 싶어! 이렇게 못생긴 기본 radio 디자인을 아래의 디자이너가 정해준 디자인으로 바꾸러면 어떻게 해야할까?? 이 방법을 사용할 경우 border color나 size등 일부 수정은 가능하겠지만, 위 사진처럼 예쁜 체크박스 이미지를 사용할 순 없다..! 우린 저 이미지를 그대로 불러와서 사용하고 싶다. 우선, 우리는 원래있던 저 동그라미를 사용하는 게 아니라 예쁜 체크 이미지를 불러올 예정이기 때문... CSS멋쟁이사자처럼_FE_2기CSS CSS 기초 (2) 선택자 / nth-child가 이상하다!? 태그[속성이름] [속성이름] 에 해당되는 속성을 가진 태그를 모두 선택 태그[속성이름="변수"] 속성이름의 속성값이 변수와 일치하는 태그를 선택 태그[속성이름~="변수"] 속성이름의 속성값이 변수를 포함하는 모든 태그 선택 (단어) 태그[속성^="변수"] 속성이름의 속성값이 변수로 시작하는 태그 선택 태그[속성$="변수"] 속성값이 변수로 끝나는 요소를 선택 태그[속성*="변수"] 속성값이 ... CSS멋쟁이사자처럼_FE_2기CSS 기초 (1) - 인라인박스와 블록박스 보이는것처럼 페이지 끝까지 영역이 채워져있는 것을 볼 수 있습니다. 두번째 블록박스는 넓이 500값을 가진 블록박스입니다. 색상은 넓이만큼만 채워져있고, 나머지 영역은 주황색의 마진영역으로 채워져 있는 것을 확인 할 수 있습니다. 그렇기 때문에 블록박스를 사용하면 옆에 나란히 다른 요소가 올 수 없는것이죠. width와 height속성을 사용해 스타일을 컨트롤 할 수 있다. 패딩과 마진, 보... CSS멋쟁이사자처럼_FE_2기CSS 기초 (4) - Table <table> 태그로 테이블을 생성하고 내부 요소를 채워준다. table 태그는 컨테이너 요소로 내부에는 제목(caption)과 행(tr), 열(row) 그리고 셀(td)와 셀의 제목(th)으로 이루어져있다. 1. 제일먼저 테이블을 생성하고 안에 제목을 지정해준다. <caption>은 테이블 제목이나 설명을 의미하며, table요소의 첫번째 자식으로 사용한다. 두번째로 테이블안에 행(tr)을... html멋쟁이사자처럼_FE_2기html 기초 (3) - Form 웹 페이지에 있는 form에 데이터를 입력 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동 웹 서버는 데이터를 처리하기 위해 APP을 호출 필요에 따라 APP은 DB로 데이터 전송 DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송 WEB에서 사용자 브라우저로 전송 사용자 페이지에 출력 action : 입력값을 전송할 페이지를 나타낸다 ( 페이지가 없으면 ... html멋쟁이사자처럼_FE_2기html 특강 - with 빔캠프 종찬님 div, h1~h6, header 등과 같은 태그들은 selector , 그 안에 있는 요구사항들은 property와 value라고 부른다. width : 값을 지정안하면 (auto) 부모요소의 너비를 기준으로 가득 차게 된다. auto의 경우 부모요소의 넓이 값인 500에 자동으로 padding, border값이 조절되어 500으로 잘 출력되어 있는것을 확인할 수 있는 반면 100%로 설정... CSS멋쟁이사자처럼_FE_2기CSS
실전 (1) - checkbox랑 select를 이쁘게 꾸미고 싶어! 이렇게 못생긴 기본 radio 디자인을 아래의 디자이너가 정해준 디자인으로 바꾸러면 어떻게 해야할까?? 이 방법을 사용할 경우 border color나 size등 일부 수정은 가능하겠지만, 위 사진처럼 예쁜 체크박스 이미지를 사용할 순 없다..! 우린 저 이미지를 그대로 불러와서 사용하고 싶다. 우선, 우리는 원래있던 저 동그라미를 사용하는 게 아니라 예쁜 체크 이미지를 불러올 예정이기 때문... CSS멋쟁이사자처럼_FE_2기CSS CSS 기초 (2) 선택자 / nth-child가 이상하다!? 태그[속성이름] [속성이름] 에 해당되는 속성을 가진 태그를 모두 선택 태그[속성이름="변수"] 속성이름의 속성값이 변수와 일치하는 태그를 선택 태그[속성이름~="변수"] 속성이름의 속성값이 변수를 포함하는 모든 태그 선택 (단어) 태그[속성^="변수"] 속성이름의 속성값이 변수로 시작하는 태그 선택 태그[속성$="변수"] 속성값이 변수로 끝나는 요소를 선택 태그[속성*="변수"] 속성값이 ... CSS멋쟁이사자처럼_FE_2기CSS 기초 (1) - 인라인박스와 블록박스 보이는것처럼 페이지 끝까지 영역이 채워져있는 것을 볼 수 있습니다. 두번째 블록박스는 넓이 500값을 가진 블록박스입니다. 색상은 넓이만큼만 채워져있고, 나머지 영역은 주황색의 마진영역으로 채워져 있는 것을 확인 할 수 있습니다. 그렇기 때문에 블록박스를 사용하면 옆에 나란히 다른 요소가 올 수 없는것이죠. width와 height속성을 사용해 스타일을 컨트롤 할 수 있다. 패딩과 마진, 보... CSS멋쟁이사자처럼_FE_2기CSS 기초 (4) - Table <table> 태그로 테이블을 생성하고 내부 요소를 채워준다. table 태그는 컨테이너 요소로 내부에는 제목(caption)과 행(tr), 열(row) 그리고 셀(td)와 셀의 제목(th)으로 이루어져있다. 1. 제일먼저 테이블을 생성하고 안에 제목을 지정해준다. <caption>은 테이블 제목이나 설명을 의미하며, table요소의 첫번째 자식으로 사용한다. 두번째로 테이블안에 행(tr)을... html멋쟁이사자처럼_FE_2기html 기초 (3) - Form 웹 페이지에 있는 form에 데이터를 입력 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동 웹 서버는 데이터를 처리하기 위해 APP을 호출 필요에 따라 APP은 DB로 데이터 전송 DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송 WEB에서 사용자 브라우저로 전송 사용자 페이지에 출력 action : 입력값을 전송할 페이지를 나타낸다 ( 페이지가 없으면 ... html멋쟁이사자처럼_FE_2기html 특강 - with 빔캠프 종찬님 div, h1~h6, header 등과 같은 태그들은 selector , 그 안에 있는 요구사항들은 property와 value라고 부른다. width : 값을 지정안하면 (auto) 부모요소의 너비를 기준으로 가득 차게 된다. auto의 경우 부모요소의 넓이 값인 500에 자동으로 padding, border값이 조절되어 500으로 잘 출력되어 있는것을 확인할 수 있는 반면 100%로 설정... CSS멋쟁이사자처럼_FE_2기CSS