position 속성 - static, relative, absolute, fixed를 알아보자
·
Front/css
[position] position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성으로 상속되지 않는다. 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다. [종류] static : 기본값으로 위치를 지정하지 않을 때 사용한다. relative : 위치를 계산할때 static의 원래 위치부터 계산한다. absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다. fiexd : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.
Input type ="date" 사용시 placeholder 없애기
·
Front/css
형식을 사용하게 되면 볼 수 있는 기본 형식이다. 여기서 연도-월-일 을 없애고 내가 원하는 글씨를 새겨보려고 한다. 아래의 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; display: none; } input[..
[html, css] 홈페이지 따라 만들기
·
Front/css
그 동안 배운 html 과 css 를 이용해서 내가 좋아하는 브랜드 홈페이지를 따라 만들어 보았다. 아쉬운 점 글자 폰트를 못 찾아서 대충 고딕으로 따라 한 점. 그리고 화면을 작게 만들었을 때 비율이 달라지는 것. 상단에 메뉴바 만드는 법을 몰라서 그냥 이미지로 대체 했다는 것. 세번째 단락을 table 로 만들었는데 그게 맞는 것인지 아니면 div 로 했었어야 했는 것인지 아직도 모르겠다. 세일이 시작되었습니다! | 여성복 쇼핑하기 남성복 쇼핑하기 Sale 여성복 쇼핑하기 남성복 쇼핑하기 세일이 시작되었습니다 최대 50% 할인 여성 신상품 남성 신상품
[css] 웹 페이지의 살 붙이기 - border 테두리 꾸미기
·
Front/css
css에는 테두리 종류가 많다. 원하는 스타일을 골라 예쁘게 살을 붙이는데 사용하면 좋다. 또한 테두리 두께를 조절하는 border-witdth 와 border 색상을 바꾸는 border-color 도 있으니 적재적소에 사용하면 좋겠다. 테두리 제어 d1 dotted 테두리 d2 dashed 테두리 d3 solid 테두리 d4 double 테두리 d5 groove d6 ridge테두리 d7 inset 테두리 d8 outset테두리 d9 none테두리 d10 hidden테두리 d11 dotted dashed solid double 테두리 hidden hidden hidden hidden [결과]
해니01_15
'Front/css' 카테고리의 글 목록