Programming (115) 썸네일형 리스트형 [웹프로그래밍] 8. 박스모델과 포지셔닝 박스모델 CSS에서 화면 구성요소를 다루기 위한 방법으로 레이아웃을 구성할 때 중요한 개념 포지셔닝 화면 배치를 위한 속성들을 활용하는 기법 -> 박스모델을 정의하고 레이아웃을 설계해서 원하는 위치에 구성요소를 자유롭게 배치 1. CSS 단위 px, % 등 1) 절대 단위 : 화면의 크기나 해상도에 따라 달라지는 단위로 특정용도 외 사용을 지양한다. 사용용도 : 박스의 크기를 지정할 때 px, 폰트 크기 지정할 떄 pt를 주로 사용 2) 상대 단위 : 부모 요소를 기준으로 상대적인 크기를 지정하는 단위 상대 단위 종류 % : 100%를 기준으로 하는 상대 크기 em : 부모 요소의 기본 크기를 1em으로 상대적인 크기 지정 -> 부모의 크기 변경시 변한다. rem : 부모가 아닌 최상위 root[like.. [웹프로그래밍 실습] 7. CSS 셀렉터와 스타일 속성 Q-1. 기본 셀렉터 Tage selector Class selector Id selector Tage selector2 Q-2. 기본 셀렉터 조합 text-1 text-2 text-3 text-4 text-5 text-6 Q-3. 컬러 속성 Color Name:red HEX($) : #FF0000 RGB: rgb(255,0,0) Q-4. 텍스트 및 폰트 속성 Times New Roman Italic Text Bold 20px Text 2em Right align Text Q-5. 텍스트 정렬 속성 CSS text-image align vertical-align:top vertical-align:middle vertical-align:bottom Q-6. 링크 속성 Hyper Link attributes.. [웹프로그래밍] 7. CSS 셀렉터와 스타일 속성 셀렉터와 스타일 속성 기본 셀럭터와 셀렉터마다 HTML 요소에 접근하는 방법 CSS 디버깅하고 테스트하는 좋은 방법 : 크롬의 검사기능 1. 셀렉터 스타일을 적용하는 대상을 지정하는 방법 태그, 아이디, 셀렉터를 사용 태그에서 사용하는 id 속성은 문서내 유일한 값으로 중복되지 않는다. 클래스는 미리 정의하고 그 클래스 속성으로 스타일을 지정한다. 셀렉터 예 설명 .class .inro html 태그에서 intro인 클래스로 된 모든 태그 영역 #id #banner html 태그에서 banner인 id로 된 태그 영역 * * 문서 내 모든 요소를 선택 태그 p 문서 내 모든 태그 영역 선택 태그, 태그 div, p 모든 와 태그 영역 선택 태그 태그 div p 태그 안에 있는 모든 태그 영역 선택 2. .. [웹프로그래밍 프로젝트] 1. HTML로 포탈 메인화면 만들기 언더케이지 닷컴이라는 전문리뷰사이트를 HTML만을 이용해 메인화면를 만들어 본다. underkg.co.kr/ UNDERkg 세상의 모든 1KG 이하 제품 리뷰, 스마트폰 개봉기, 사용 평점, 사용 동영상 등 수록 underkg.co.kr review news opinion community shop fix event rental Log in Sign Up GADGET NEWS [루머] ZTE Axon 30 Ultra, $1,200에 판매[2] 삼성전자, 갤럭시 스마트 태그 플러스 미국 출시 노키아, 안드로이드 Go 탑재 스마트폰 2종 발표[1] 기아, K8 출시[1] 삼성 갤럭시 A 퀀텀2 추가 유출[8] 노키아, 최대 36시간 사용 Lite Earbuds 발표[2] 화웨이 P50 추정 실기 유출[4] .. [웹프로그래밍 실습] 1장. HTML Q-1. 테이블 병합 1 2 3 4 5 6 7 8 Q-2. 가입 신청서 만들기 First name: Last name: Email: Gender : Male Female Other Favorite : HTML, Java, PHP University : Gachon University Seoul University Yeonsei University Donguk University Color: Date : [웹프로그래밍] 5. 입력양식 1. 입력 양식 개요 웹에서 사용자에게 정보를 입력 받을 때 사용하는 사용자 인터페이스 태그 텍스트 입력, 선택, 버튼, 파일 첨부 가능 버튼은 이벤트처리를 위해 자바스크립트와 연동 파일 첨부는 서버에서 구현이 필요함 Shipping Address name: Address: City: State: zip: -> 태그를 통해 작성된 입력 양식은 method와 action을 이용해 입력 데이터를 서버에 전송한다. -> method : 웹 서버와 데이터를 전달하는 방법 지정 get 방식 : 서버에 데이터를 요청해 결과를 받기 위한 방식 [크기 제한이 있고, 보안성 떨어짐] post 방식 : 서버에 데이터를 전송하기 위한 방식 [크기 제한이 없으며 ,보안성 높음] -> action : 입력 받은 값을 전송할 서.. [웹프로그래밍 실습] 5. 입력양식 5-1) 입력양식 활용 - 검색창 만들기 html-11.html : Naver search search: [웹프로그래밍 실습] 4. 이미지와 테이블 4-1. 이미지 태그 활용-url 4-2. 이미지 태그 활용-로컬이미지 4-3. 테이블 만들기 no. name email tel 1 James Kang james@newyork.ac.kr,010-1234-1234 2 Justin Born justin@google.com Mariata Kumba kumba@amazon.com 010-2222-3333 4 Mola Lnada mola@naver.com 010-4444-5555 이전 1 2 3 4 5 6 7 ··· 15 다음
