CSS14 [23-2] WEB 1. HTML 기본 1. HTML5 - 로 시작 1. 차이점 - 표준화된 시맨틱 태그 삽입 - 플러그인 없이 미디어 재생 - 다양한 JS API 제공 2. 구조 - HTML5 : 구조와 내용 - CSS3 : 모양 - JS : 입력 처리 3. 작업 순서 1) mark up 2) 검증(validation) : https://validator.w3.org/ 3) 디버깅(debug) : 개발자 도구 4) css 5) JS / JQuery 4. 템플릿 설정 - 환경 : visual studio code - 스니펫 : myhtml { "myhtml tmpt" : { "prefix" : "myhtml", "body" : { "", "", "", "", "$2", "", "html" }, "description" : "myhtml 템플릿.. 2023. 11. 14. [23-2] WEB 목차 * WEB 목차 1. HTML 기본 2. 시맨틱 웹 & 폼 요소 3. 4. 5. HTML, CSS 내용을 정리했습니다. 2023. 11. 14. [생활코딩] CSS 8. Can I Use (웹 기술 통계 확인) * [생활코딩] CSS 목차 여러 CSS, HTML, JavaScript 중 현재 웹브라우저들이 그 기술을 얼마나 채택하고 있는가에 대한 통계를 보여주는 서비스. 궁금한 기술 이름을 검색하면 오른쪽 상단에 이용률을 보여준다. * 사이트 링크 (https://caniuse.com/) Can I use... Support tables for HTML5, CSS3, etccaniuse.com 지원 여부는 색깔로 표시해 준다. 아주 중요하고 유용한 사이트니까 참고하면 좋다. 2023. 11. 5. [생활코딩] CSS 5. 개발자 도구 * [생활코딩] CSS 목차 1. 웹페이지 분석- F12 클릭 - 궁금한 부분 클릭 - Style과 Computed 탭에서 세부사항 확인 2. 코드 확인- 오른쪽 클릭 - [검사] 3. 장치모드 해제- Ctrl + Shift + M 4. 중단점 설정 (break point)- Source 탭 - 마우스로 라인 번호 클릭 * 콘솔 창 활용 2023. 11. 5. [생활코딩] CSS 11. 웹사이트 만들기 (디자인 강화) * [생활코딩] CSS 목차 1. 아이디어 생활코딩 예제처럼 선으로 구역을 나눴습니다. 가로길이가 800px 이하로 바뀌면 레이아웃이 사라집니다. - 다른 html 파일도 div로 나눠줘야 본문이 목차 오른쪽에 나옵니다. 제작 : 2023. 6. 17 (github 이전) 2. 결과물 1. 링크 https://cejinn.github.io/stardew_wiki_v2/ Stardew Valley 스타듀 밸리란? Stardew Valley는 농장 RPG 게임입니다. NPC의 호감도를 높이면 요리 레시피나 선물을 얻을 수 있고, 이벤트를 볼 수 있습니다. 기본 사항 1. [윈도우 키] + [R]키를 누릅니다. 2. %appdata%/Sta cejinn.github.io - github 웹호스팅까지 완료 2... 2023. 11. 5. [생활코딩] CSS 10. 코드 재사용 * [생활코딩] CSS 목차 1. 링크 파일을 이용해서 퍼뜨리기1. style.css 파일 만들기 2. style 태그 내부에 있던 코드 옮기기 3. html 파일에 링크 태그 추가 - html 웹페이지가 style.css 파일과 링크(연결)되어있고, 웹브라우저는 css 파일을 다운로드하여 웹페이지에 적용 2. 효과1. 내부적으로 훨씬 효율적인 상태 2. 재사용성 증가 3. 사용성 증가 4. 한 번에 전부를 바꿀 수 있음 - style.css에 있는 코드만 변경하면 됨 5. 코드 양 감소로 경제적 효과 6. 캐시 기능 덕분에 네트워크적으로도 효율적 - 빠르게 보여주면서 사용료는 적게 사용 3. 확인- 개발자 도구에서 [Network] 탭 확인 2023. 11. 5. [생활코딩] CSS 9. 미디어 쿼리 (MediaQuery) * [생활코딩] CSS 목차 * 미디어 쿼리를 이용해서 다양한 크기의 스크린에 맞는 디자인하기 1. 반응형 디자인 (= 반응형 웹, Responsive Web)- 화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것 2. 미디어 쿼리 (Media Query)- 반응형 디자인을 위한 기능 1. 실습 : max-width1. 결과 - 의도: 가로길이가 800px보다 작아지면 화면에 안 나옴 2. 코드 - 가로가 800px보다 작아지면 안 보이도록 설정 2. 실습 : min-width1. 결과 - 의도: 가로길이가 800px보다 커지면 화면에 안 나옴 2. 코드 - 가로가 800px보다 커지면 안 보이도록 설정 3. 실습 : 미디어쿼리 활용1. 결과 - 800px 보다 가로폭이 작을.. 2023. 11. 5. [생활코딩] CSS 7. 그리드 (레이아웃 제작) * [생활코딩] CSS 목차 1. 디자인용 나누기 태그1. div- 블록 레벨 엘리먼트 - 부모와 자식으로 감싸서 사용할 수 있음 2. span- 인라인 엘리먼트 2. Grid 장점- 자동으로 커짐 - 최신 기술 3. 실습 : 그리드1. 결과- 글자를 회색 테두리로 감싸기 : div 이용 - 분홍 테두리로 묶어서 감싸기 : div 이용 2. 코드 - div를 부모 자식 관계로 중첩해서 사용 1) 부모 div: 분홍색 - id를 grid로 설정 2) 자식 div: 회색 - fr : 화면 전체를 자동으로 쓰게 하는 단위, 비율 (1fr, 2fr) 4. 실습 : 레이아웃 제작1. 결과 - 본문을 하이퍼링크 오른쪽으로 옮기기 - div 이용 2. 코드 1) style 태그 내부 - grid 기능 활용 - 본문은.. 2023. 11. 5. [생활코딩] CSS 6. 박스 모델 (레이아웃 제작) * [생활코딩] CSS 목차 두 번째 목표인 레이아웃 제작입니다. 박스모델을 이용하면 1차 작업을 끝낼 수 있습니다. 1. 박스 모델 (Box model)- HTML 태그 하나하나를 박스로 취급 - 부피감 결정 1. 콘텐츠 (Contents)1) width: 콘텐츠 폭 2) height: 콘텐츠 높이 2. 패딩 (padding)- 콘텐츠 바깥쪽에 있는 테두리 사이 간격 3. 마진 (margin)- 테두리와 테두리 사이 2. 실습1. 결과- 회색 선 그리기 1) 가로선: h1 태그 2) 세로선: ol 태그 2. 코드 2023. 11. 5. [생활코딩] CSS 4. HTML 태그의 크기 * [생활코딩] CSS 목차 1. HTML 태그의 크기1. 블록 레벨 엘리먼트 (block level element)- 화면 전체 차지 ex) h1 2. 인라인 엘리먼트 (inline element)- 자기 크기 차지 ex) a 2. 실습 : 크기 확인1. 결과 - 보더에 빨간색 5px 테두리를 둘러서 h1 태그와 a 태그 부피 확인 2. 코드 - boder 안에 5px, solid, red를 띄어쓰기로 구분해서 입력 2023. 11. 5. [생활코딩] CSS 3. 선택자와 속성 * [생활코딩] CSS 목차 1. 선택자와 속성 1. 선택자 (Selector)- 효과를 누구에게 줄 것인가 표시 2. 효과 (선언, Declaration)- 선택자에 지정될 효과 - 속성(property)과 값(Value)으로 나뉨 2. 선택자 스스로 알아내는 법1. 종류- id 선택자: #id, 1번만 등장 (중복 X) - 클래스 선택자: .class - 태그 선택자: a, h1, 나머지 2. 우선순위id > 클래스 > 태그 - 더 구체적인 것이 우선순위가 높음 - 클래스가 더 유리 3. 검색어: CSS Selector CSS Selectors ReferenceW3Schools offers free online tutorials, references and exercises in all the maj.. 2023. 11. 5. [생활코딩] CSS 2. Style 태그와 속성 * [생활코딩] CSS 목차 1. Style 태그 1. 선택자 (Selector) - 빨간 부분 - 효과를 누구에게 줄 것인가 표시 2. 효과 (선언, Declaration) - 노란 부분 - 선택자에 지정될 효과 2. Style 속성- style 태그를 직접 사용한 경우, 위치한 태그에게 영향을 줌 - 선택자 사용할 필요 X style="color:red" - html 속성 - CSS 3. 실습1. 결과물- a 태그 : 검은색, 밑줄 제거 - 현재 페이지(돈 치트) : 링크만 빨간색, 밑줄 2. 코드 (노란색 확인) * 밑줄 - 제거: text-decoration: none; - 생성: text-decoration: underline * 구분자 : 세미콜론 (효과 지정한 다음 사용) - 한 줄에 있어도.. 2023. 11. 5. [생활코딩] CSS 1. 등장 배경과 장단점 * [생활코딩] CSS 목차 1. 등장 이유1. HTML은 정보에 집중하게 하려고 2. 디자인할 때 더 효율적 2. CSS 장단점1. 단점 - 사용자가 새로운 문법 익혀야 함 - 웹이 CSS를 해석할 줄 알아야 함 2. 장점 (효율적) - 중복 제거 - 일괄 변경 - 유지 보수 편리 - 가독성 증가 3. 글씨 색 바꾸기 1. 간단 설명 - style : html의 문법, 안쪽은 CSS의 언어라는 뜻 2. 코드 - 의도: 모든 a 태그 폰트 컬러를 빨간색으로! - 주석: 3. 결과물 - 하이퍼링크가 빨간색으로 변경됨 2023. 11. 5. [생활코딩] CSS 목차 * CSS 목차 1. 등장 배경과 장단점 2. Style 태그와 속성 3. 선택자와 속성 4. HTML 태그의 크기 5. 개발자 도구 6. 박스 모델 7. 그리드 8. Can I Use (웹 기술 통계 확인) 9. 미디어 쿼리 10. 코드 재사용 11. 웹사이트 만들기 CSS를 이용해서 웹사이트를 디자인하는 방법을 배웁니다. 목표는 3가지입니다. 1. CSS 기본 문법 (선택자와 속성) 2. Grid를 이용한 현대적 레이아웃 제작 방법 3. MediaQuery를 이용해서 다양한 크기의 스크린에 대응하는 방법 * 마무리- 선택자와 속성을 많이 알수록 표현력 증가! 2023. 11. 5. 이전 1 다음
