Programming (117) 썸네일형 리스트형 [웹프로그래밍] 9. 복합 셀렉터 기본 셀렉터 태그, id, 클래스를 사용하는 방법 기본 셀렉터로는 특정한 부분의 디자인을 적용하기 어렵다. 복합 셀렉터 html 계층 구조 안에서 부모요소와 자식요소간의 관계를 파악하고 상속을 통해 CSS 속성을 적용하기 위해 복합 셀렉터를 이용한다. 사용자 동작과 UI 요소 상태에 스타일 적용하는 가상 클래스를 배우고 어떤 속성이 존재하는지 학습한다. -> CSS 상속, 후손, 자손 형제 선택자등의 선택자 조합 가상 선택자에 대해 배운다. 1. 상속 html 계층 구조에서 특정 속성들이 부모요소로부터 자식요소로 전달되는 개념 [margin 속성은 제외] 상위 객체와 하위 객체의 관계형 구조를 의미하며 부모 요소의 속성을 자식 요소가 물려받는 것을 의미. 코드의 중복성을 줄여주기 때문에 생산성을 높일 수.. [웹프로그래밍 실습] 8. 박스모델과 포지셔닝 Q 8-1. CSS 단위 Basic Text Size: 20px 30px 1em 2em 1rem 2rem Q 8-2. 기본 박스모델 Box1 Box2 Q 8-3. position 설정을 통한 박스 배치 Box position example Box-1: static Box-2: relative Box-3: relative Box-4: absolute Box-5: fixed [참고 : F12 개발자도구를 통해 CSS익히기] Q 8-4. float 속성 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro quae voluptate tempora molestiae, laboriosam ipsum veniam rerum quibusdam ullam. .. [웹프로그래밍] 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 : 입력 받은 값을 전송할 서.. 이전 1 2 3 4 5 6 7 ··· 15 다음
