데이터들

position 속성 위치 기준 static X - relative O 자신이 원래 있던 위치 absolute O 1. static이 아닌 부모 / 2. body 신호등 만들어보기 Margin / padding 사용 #black { background-color: black; width: 160px; height: 380px; border-radius: 20px; box-sizing: border-box; /* border+padding+content를 사이즈로하는 border-box로 box-sizing을 한다. */ padding-left: 30px; padding-top: 30px; } #yellow,#green,#red { border-radius: 50%; width: 100px; height:..

margin(바깥), padding(안쪽) margin : 10px or padding 10px => 전체 방향 margin(바깥) padding(안쪽) +방향 => 원하는 방향 ** 크기 설정 (1) Content-box : 콘텐츠 영역만을 크기로 => ex width: 500px padding : 20px => 전체 크기 540 (2) Border-box : Content + Padding + Border영역을 크기로 => ex width: 500px padding : 20px => 전체 크기 500 컨텐츠 크기 460 포지션 실습 div{ width: 100px; height: 100px; } #redBox{ background-color: red; position: absolute; top: 0p..

HTML CSS 정보표현 디자인 유지보수 편의성, 재사용성을 높이기 위해 HTML과 CSS를 나누었다 /* css의 영역 */ p{ font-family: '나눔고딕', '맑은고딕'; /* 처음 나눔고딕을 사용 할 수 없는 상황에선 두번째인 맑은고딕체를 사용한다. 글씨체는 모두 비슷한 글씨체로 */ font-size: 30px; font-weight: 900; font-style: italic; } ** 선택자 종류 01 일반선택자 기호 가중치 전체선택자 * 0 태그선택자 태그이름 1 클래스선택자 . 10 아이디선택자 # 100 02 계층선택자 기호 자식선택자 > 자손선택자 띄어쓰기 근접후행선택자 + 후행선택자 ~ 03 그룹선택자 , 04 반응선택자 : => 마우스를 올렸을 때 :hover => 마우스를..

아이디: 비밀번호 : 주소: 좋아하느 커피를 모두 골라주세요 아메리카노 카페라떼 성별을 골라주세요 남성 여성 네이버 다음 구글

-이미지 태그 속성 설명 scr 이미지의 경로지정(파일경로나 URL) (=source) alt 이미지에 대한 설명 (경로가 잘못되었을 경우) a. 현재를 기준으로 ./ b. 상위를 기준으로 ../ c. 루트를 기준으로 ../../../ --앵커태그 텍스트 속성 설명 href hypertext reference로 연결할 주소 지정 --테이블태그 코딩이 아니라 일반적으로 표를 만드는 상황 표를 만들때 => 몇줄 만들건지 => table row => 몇칸 만들건지 -> td를 여러번 만든다 테이블안의 내용 => table data => 내용 --> 가나 다라 rowspan -> 행을 합칠때 colspan -> 컬럼을 합칠때 회원가입 폼 실습 STEP1 : 아이디/비번 입력 아이디 비밀번호 비밀번호 확인 Ste..

웹 클라이언트: 웹을 사용하려는 고객이 서버에 요청(request) 웹 서버: 클라이언트에게 네트워크를 통해 서비스를 제공 / 응답(response) 프로토콜 컴퓨터들 간의 원활한 통신을 위해 지키기로 약속한 규약 ** HTML - HT -> Hyper Text 다른 문서로 즉시 접근 - ML -> Markup 표시! '태그' ★★ 안녕하세요 시작태그 Content(내용) 끝태그 ====> Element (요소) ** 태그의 종류 1. 제목 태그 h태그 + 숫자 (1~6) 2. 본문 태그 영역차지 개행 a. p태그 한줄의 영역 O b. span태그 컨텐츠 X 3. 개행 태그 br태그 4. 강조 a. 실질적의미 강조 strong b. 시각적의미 강조 b 5. 리스트 태그 > 리스트를 선언 ol(순서O) ,..