본문 바로가기

html, css공부

(13)
[css] 박스모델 자세하게 알아보자 (margin, padding, border, background..) 박스 모델은 말 그대로 박스를 만드는 것 css의 처음이자 마지막이다 알아보자 마진과 패딩 컨텐트를 감싸고 있는 친구가 box 그 실선이 border다 패딩(padding)은 박스 모델의 내부와 외부 공간을 구성하는 속성이다 콘텐츠를 기본으로 보더(border)까지 공간을 패딩이라 하며 보더부터 점선까지 마진(margin)이라고 한다 .box1{ margin: 30px; //바깥으로 30px씩 padding: 30px; //안쪽으로 30px씩 border: 5px solid red; //테두리 5픽셀로 빨간색 width: 500px; // box너비 500px } 하나의 값을 적용하면 네 가지 방향(상,하,좌,우)으로 공간이 생겨 밀려난다 하나씩 해줄 수도 있다 .box1{ margin-top: 30px..
[css] 선택자의 종류 자세히 알아보자!! HTML 문서의 특정 영역이나 요소 등을 선택해줄 수 있는 장치가 필요하다 요것을 CSS에서는 선택자라고 부른다 뭘 가리키는 지 알아야 가져오지 용어 내용 태그 선택자 tag selecter HTML 태그에 속성 적용 클래스 선택자 class .로 시작하는 선택자 아이디 선택자 id #으로 시작 종속 선택자 dependant 선택자에 종속된 선택자 하위 선택자 descendant 선택자 내부의 모든 후손 선택자 전체 선택자 universal 전체 문서에 영향을 줌 그룹 선택자 group 여러 선택지를 복합적으로 적용할 때 자식 선택자 child 선택자 바로 밑의 자식 선택자 인접 선택자 adjacent 붙어있는 선택자와 선택자에 특정 효과 줄 때 사용 가상(수도)선택자 psudo-classes 단독으로 ..
[HTML] input 태그를 알아보자 ② input type외에 input에 따로 속성을 줄 수 있다 placeholder로 미리 값의 예를 보여주고 type="submit"으로 값을 전송하는 버튼이 된다 이런거 말고 더 알아보자!! input 속성 설명 autofocus autofocus가 지정된 부분에 커서가 깜박인다 form input에 form 속성을 적용하여 form 외부에 있는 input속성을 적용한다 datalist 미리 지정된 값을 리스트 형식으로 불러오거나 보여준다 min and max input 값의 최솟값과 최댓값을 지정해 줄 수 있다 multiple input 부분에 여러 개의 파일을 불러 올 수 있게 한다 pattern 지정된 패턴 값을 입력 가능하게 해준다 placeholder input 부분에 미리 값 또는 입력 예를..
[HTML] input 태그를 알아보자 ① 이전에는 단순히 text, password, checkbox, radio button, image, file 정도의 타입만 있었지만 HTML5에서는 더 많은 타입이 추가 되었다 크롬 MS엣지 오페라 같은 건 대부분이 되지만 익스플로어는 안되는게 몇 개 있다 제발 익스플로어 쓰지마!!!!! HTML5부터 사용 가능해진 친구들이다 input type 설명 color 색상값 입력 date 날짜 입력 datetime 날짜와 시간 입력 (타임 존 적용) datetime-local 날짜와 시간 입력 (타임존 ㄴ적용) email 이메일 주소 입력 month 년도와 월을 입력할 때 사용 number 지정한 숫자 입력 range 숫자의 범위 지정 search 검색 폼 지정 tel 전화번호 입력 time 시간 입력 url..
[HTML] 띄어쓰기 하는 방법 텍스트 내 띄어쓰기를 해보자 난 코드를 이렇게 썼는데 출력물은 요렇게 붙여서 나온다 아 띄어쓰기 하고싶다!!!!! 그럴땐 를 중간에 끼워보자 와우!!!!! 된다!!!