Front/css

라디오버튼을 구현 하다 보면 조금 더 디자인에 맞게 라디오 버튼의 동그라미 부분을 커스텀 하고 싶을 때가 있다. 그럴때는 이미 기본으로 잡혀져 있는 구성들을 none 처리 해준 뒤 (여기서 다른 웹 사이트들의 기본 설정도 none 처리 해줌) 원하는 모양 대로 그려 나가면 된다.    See the Pen Untitled by Kate lee (@Kate-lee-the-encoder) on CodePen.">See the Pen Untitled by Kate lee (@Kate-lee-the-encoder) on CodePen.   input[type='radio'] { //input type이 radio인 모든 것들 -webkit-appearance: none; //웹킷 기본 구성 없음 ..

[position] position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성으로 상속되지 않는다. 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다. [종류] static : 기본값으로 위치를 지정하지 않을 때 사용한다. relative : 위치를 계산할때 static의 원래 위치부터 계산한다. absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다. fiexd : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

형식을 사용하게 되면 볼 수 있는 기본 형식이다. 여기서 연도-월-일 을 없애고 내가 원하는 글씨를 새겨보려고 한다.    아래의  CSS 코드를 적용하면 달력만 있는 텅빈 input 박스를 만나게 된다. input[type=date]::-webkit-datetime-edit-text { -webkit-appearance: none; display: none;}input[type=date]::-webkit-datetime-edit-month-field{ -webkit-appearance: none; display: none;}input[type=date]::-webkit-datetime-edit-day-field { -webkit-appearance: none; displ..

그 동안 배운 html 과 css 를 이용해서 내가 좋아하는 브랜드 홈페이지를 따라 만들어 보았다. 아쉬운 점 글자 폰트를 못 찾아서 대충 고딕으로 따라 한 점. 그리고 화면을 작게 만들었을 때 비율이 달라지는 것. 상단에 메뉴바 만드는 법을 몰라서 그냥 이미지로 대체 했다는 것. 세번째 단락을 table 로 만들었는데 그게 맞는 것인지 아니면 div 로 했었어야 했는 것인지 아직도 모르겠다. 세일이 시작되었습니다! | 여성복 쇼핑하기 남성복 쇼핑하기 Sale 여성복 쇼핑하기 남성복 쇼핑하기 세일이 시작되었습니다 최대 50% 할인 여성 신상품 남성 신상품