개발 공부/HTML & CSS

[WEB2 - CSS] 7일차 : 미디어 쿼리 Media Query

배운 내용 목록 반응형 웹 (Responsive Web) @media 반응형 웹이란? 화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 동작하는 이를 구현하기 위한 핵심 개념/기술? => 미디어 쿼리 (Media Query) @media (조건) { 동작 코드 } @media(min-width:800px) { div{ display:none; } } 실습코드 (+추가한 부분) @media(max-width:800px){ #grid{ display:block; } ol{ border-right:none; } h1{ border-bottom:none; } } 결과 CSS 코드의 재사용성 태그 사용하여 중복된 코드를 최소화

[WEB2 - CSS] 6일차 : 박스 모델 & 그리드 모델

배운 내용 목록 박스 모델 그리드 모델 박스 모델 태그마다 부피가 다름 ex) h1 => 화면 전체 사용 : block level element a => 자기 크기만큼 : inline element 변경하는 것도 가능 // block level element => inline element display:inline; //inline element => block level element display:block; * display:none; => 태그 사라짐 팁) 중복 제거/최소화 h1, a{ border-width:5px; border-color:red; border-style: solid; } *border 부분도 중복 제거가 가능함 (속성 순서 상관X) h1, a{ border:5px solid ..

[WEB2 - CSS] 5일차 : 효과 Declaration/Property & 선택자 Selector

배운 내용 목록 효과 선택자 class id 선택자간의 우선순위 이미지와 속성 img➡️ image의 약자 src➡️ source의 약자 width = "100%" 이미지 크기 화면의 100%으로 맞춤 효과 font-text 글씨 크기 속성 text-align: center; 실습) 오늘 해야할 일 1. 링크의 기본적인 색상은 검은색 2. 사용자가 방문한적 회색 3. 현재 방문중인 페이지 빨간색 //두 텍스트 색상을 회색으로 변경 HTML CSS => 중복된 코드 발생 해결 방법 => class로 묶어서 사용 class = " " 주의) 밑 코드 처럼 쓰면 제대로 작동 X => '태그' 값이 saw인 선택자 (현재 클래스가 X) saw { color:gray; } //====================..

[WEB2 - CSS] 4일차 : CSS의 기본적인 문법

배운 내용 목록 CSS의 특징 및 장점 style 태그 선택자 & 효과란 밑줄 관리 속성 CSS이란? CSS는 웹 디자인하기 위해 생긴 프로그래밍 언어 즉, 디자인 관련 코드는 CSS라 볼 수 있다. 태그 안에서만 CSS 코드가 있다. 특징 및 장점 CSS를 통해 중복 제거하여 웹페이지의 사이즈(=용량)을 줄일 수 있다. 그래서 유지보수가 편하고, 가독성이 좋아지며, html으로 디자인하는 것보다 효율적이다. a { color:red; } ➡️ 모든 a 태그를 빨간색으로 변환하는 코드 a { } 선택자 selector color:black; 효과 or declaration 만약 효과를 추가하고 싶은 태그에 직접 style를 사용하면 선택자가 필요없다. ex) HTML text-dectoration ➡️ ..

[WEB1 - HTML & Internet] 3일차 : 웹 & 인터넷 Web and Internet

배운 내용 목록 웹이란 (인터넷와의 차이점) 인테넷이 동작하는 기본적인 원리 웹 호스팅 웹 서버 영상 추가 댓글 기능 추가 채팅 기능 추가 Internet vs Web 서로 다른 개념이다. ex) 도시 vs 빌딩 웹 60년대 - 인터넷의 등장 핵전쟁이 끝난 지 얼마 안 돼서 통신에 대한 보안 강화의 필요성을 느꼈다. 이유는 당시의 통신 시스템이 중앙 집중적이었는데, 만약 핵 공격을 받게 되면 통신 시스템이 완전히 마비된다. 그래서 이러한 핵 공격에 대비할 수 있는 통신 시스템으로 등장한 게 인터넷이다. 즉, 인터넷은 중앙이 없음. 90년대 - 웹의 등장 웹은 스위스에서 처음으로 등장한다. 스위스에 물리학 연구소가 있는데, 이곳에는 127국 1만2천명의 천재적인 과학자들이 모여있는 곳이다. 80년대에 en..

[WEB1 - HTML & Internet] 2일차 : 이미지 Image, 리스트 List, 링크 Link, HTML의 구조

배운 내용 목록 이미지 태그 속성 부모 자식 관계 ex) 리스트 태그 HTML의 구조 링크 태그 실습 - 웹페이지 완성하기 이미지와 속성 img➡️ image의 약자 src➡️ source의 약자 width = "100%" 이미지 크기 화면의 100%으로 맞춤 주의할 점 이미지를 진행하고 있는 프로젝트 디렉토리에 추가했는지 확인 속성 Attribute 태그의 정보만으로 부족할 때 사용함 순서는 상관 X *유용한 사이트 unsplash.com Beautiful Free Images & Pictures | Unsplash Beautiful, free images and photos that you can download and use for any project. Better than any royalty ..

[WEB1 - HTML & Internet] 1일차 : 태그 Tag

이번 방학을 통해 웹에 대해서 공부하기로 했다. 우선 HTML와 CSS에 대해 공부한 내용을 정리하고자 한다.😊 태그 TAG란? ➡️코드를 설명하는 역할 예를 들어서 옷에 붙여있는 가격표(price tag)는 옷의 가격, 사이즈, 재질 등 여러 정보를 제공해주는 역할을 한다. HTML에서의 태그도 마찬가지다, 태그는 열리는 태그와 닫히는 태그로 구성이 되어 있고, 이 태그로 코드를 감싸서 설명하는 역할을 한다. 다음은 기초적이지만 중요하고 사용이 많은 태그들이다. strong은 텍스트 bold 처리를 해줌 u는 underline의 약자 ➡️밑줄 처리 h는 header의 약자 ➡️ 제목이라는 의미 1 부터 6까지 있고 갈수록 크기가 작아짐 줄 바꿈을 함. + 닫는 태그가 없음 C++에서 \n와 같은 역할임..