AI\SW 온라인 실무 교육/SW코딩4 웹사이트의 레이아웃 ※2022 AI/SW 온라인 실무 교육 (elice.io)※ 1. 박스 모델 Point I margin과 padding의 차이 .margin-left: border 바깥쪽에서 왼쪽에 여백을 만듦 .padding-left: border 안쪽에서 왼쪽에 여백을 만듦 top, right, bottom, left에 여백을 만들 수 있음 공간이 여백을 포함한 크기로 변경되는 점 유의 Point II top right bottom left 순서로 한 줄에 작성 가능 태그가 대표적 줄바꿈 현상이 나타남 width/height 값 사용 가능 (공간 만들기 가능) margin과 padding 값 사용 가능 (상하 배치 작업 가능) Point II Inline 요소의 특징 줄바꿈 현상 없음 width/height 값 적용.. 2022. 12. 14. 웹사이트의 디자인 Ⅱ ※2022 AI/SW 온라인 실무 교육 (elice.io)※ 1. 캐스케이딩 CSS의 우선순위를 결정하는 세 가지 요소 1. 순서 나중에 적용한 속성값의 우선순위가 높음 /* Hello World */ p { color: red; } p { color: blue; ] 2. 디테일 더 구체적으로 작성된 선택자의 우선순위가 높음 header p {color: red; } p { color: blue; } 3. 선택자 style > id > class > type 순으로 우선순위가 높음 color #color { color: blue; } .color { color: red; } h3 {color: green; } 2. CSS 주요 속성 Point I width, height 프로그래밍을 배워봐요! .para.. 2022. 12. 14. 웹사이트의 디자인Ⅰ ※2022 AI/SW 온라인 실무 교육 (elice.io)※ 1. CSS CSS는 Cascading Style Sheet의 약자로, HTML로 작성된 정보를 꾸며주는 언어입니다. Point I CSS 구성 요소 선택자 { 속성 : 속성값; } 선택자: 디자인을 적용할 HTML 영역 속성: 어떤 디자인을 적용할지 정의 속성값: 어떤 역할을 수행할지 구체적으로 명령 Point II CSS 속성 (Property) h1 { font-size: 20px; /* 폰트 사이즈 */ font-family: sans-serif; /* 글꼴 */ color: blue; /*폰트 색깔 */ background-color: yellow; /* 배경색 */ text-align: center; /* 텍스트 정렬 */ } Poi.. 2022. 12. 14. 웹사이트의 정보와 디자인 ※2022 AI/SW 온라인 실무 교육 (elice.io)※ 1. 웹을 구성하는 요소 Point I 웹 구성 요소 Point II 웹 제작시 고려 사항 웹 표준: 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격 웹 접근성: 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식 크로스 브라우징: 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법 2. HTML 기본 태그 HTML이란 Hyper Text Markup Language의 약자로, 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어입니다. Point I HTML 태그 기본 구조 컨텐츠 태그명: HTML이 갖고 있는 고유의 기능으로, 형태로 입력 컨텐츠: 열린 태그와 닫힌 태그 사이에 있는.. 2022. 12. 12. 이전 1 다음 728x90
