Web/html & css

생활코딩 7일차 [21.01.16] - CSS 마무리

media query (미디어 쿼리) : 다양한 웹 페이지의 환경(웹 페이지 크기, 가로 세로 방향 화면 등)에 각각 반응하여 웹 페이지의 특성이나 디자인을 다르게 하는 방법. @media (특성) { div { } (특성)을 기준으로 div의 속성을 띄운다. } 코드의 의미 : width가 최소 500px일 때 display를 사라지게 한다 → width>500px 일 때 display 사라지게 한다. 자 이제 미디어 쿼리를 활용해서 웹 페이지를 크기에 따른 특성을 수정해보자. 화면이 작을 때는 목차와 본문 내용 그리고 제목의 구분선이 불필요하고, 그리드 형식으로 나열하는 것도 불필요하다. width

생활코딩 6&7일차 [21.01.15]

& - block : 창 전체 다 씀 - inline : 창 전체 다 안 씀 이 놈들의 특징 : 무색 무취의 css만을 위한 그냥 태그 ( 디자인할 때 편하라고 붙이는 태그 ) 여기 div 태그를 요소로 사용하여 그리드를 통해 웹 페이지 편집을 할 것이다. 밑의 CSS 본문 내용을 화살표 방향으로 옮겨 보자. 여기에 필요한 개념이 '그리드' 묶어서 나열하기 본문 내용을 목차들 옆으로 위치시키기 위해서는 목차들과 본문 내용을 묶어야한다. → 나열하기 위해 목차들 본문 내용 '검사' 페이지 통해서 디자인 수치 구체적으로 수정하기 +CSS 선택자 보다 정확하고 구체적으로 선정하기 이 코드에서 태그의 디자인을 수정하고 싶을 때 선택자 정하는 방법 #grid ol id가 grid인 '부모' 태그 중 ol태그들을 ..

생활코딩 5&6일차 [21.01.15]

CSS를 이용한 박스 모델을 통하여 웹페이지 디자인 수정하기 이 초기 웹 페이지를 박스 모델을 활용하여 이러한 페이지로 디자인해보자. h1 태그인 'WEB' 중앙 정렬 & 밑에 라인 긋기 중앙 정렬 : text-align:center; 밑에 라인 긋기 (=박스 모델인데 하단의 선만 표시) : border-bottom : 1px solid gray; ※웹 디자인 할 때에는 상시 웹 페이지의 '검사' 페이지를 확인하면서 수정한다 ! '검사'페이지를 통하여 (도구 활용) 확인해보니 margin 값이 너무 커서 (원인 발견) h1태그 'WEB' 주변에 공간이 남는다. 따라서 margin값을 없애자 (해결 방안). ol 태그인 목차 옆에 세로 줄 긋기 세로 줄 긋기 (= ol 태그인 목차들의 박스 모델인데 우측의..

생활코딩 5일차 [21.01.13]

선택자를 스스로 알아내는 방법을 알아보기 전에, 선택자들의 몇 가지 예시를 들며 특성에 대해 알아보자. selector(선택자)에서 서술되는 순서와 종류에 따라 우선순위가 있다. 서술되는 순서에 따른 우선순위 코드를 입력하는 에디터에서 위에 쓰여있는 selector일수록 우선순위가 낮고, 밑에 쓰여있는 selector일수록 우선순위가 높다. 즉 밑에 있는 selector의 영향력이 더 막강하다. 종류에 따른 우선순위 (선택자의 종류 : 태그, class, id) 태그 : 선택자를 태그로 하면 코드 내의 모든 태그에 대해서 적용한다. (학교) class : 포괄적인 것 내에서 class로 분류하여 묶은 것들이다. (반) id : id라는 의미는 고유한 성질, 즉 유일무이한 것에 부여한 이름이다. (학생) ..

생활코딩 4일차 [21.01.12] - CSS 시작

HTML : 정보를 나타내는 코드 (물론 디자인의 태그를 사용할 수 있으나 비효율적) CSS : 디자인을 나타내는 코드 왜 CSS가 탄생하였는가? HTML로 디자인까지 나타내면 비효율적이고 혼동을 준다-HTML로 정보를 나타내는 코드만 작성하여도 복잡한데, 여기다가 정보탐색의 목적에 배반되는 디자인의 코드, 태그까지 섞여있으면 아무래도 보는 입장에서 혼란을 야기한다. 그래서 디자인만을 위한 코드 CSS가 탄생했다. CSS란? HTML에서 디자인적인 기능을 빼온 코드. 왜 CSS가 중요한가? CSS가 굉장히 효율적이다. HTML에서 디자인을 수정하려면 수억 개의 태그를 직접 수정해야 하고, 이 과정에서 수많은 오류가 날 수 있는데, CSS를 이용하면 한 개의 코드로 수억 개의 코드의 디자인 측면을 수정할 ..

생활코딩 3일차 [21.01.06]

~ http://info.cern.ch : '원시 웹' 최초로 만들어진 웹 페이지를 원시 웹이라고 부른다. 우리는 이 원시 웹을 만드는 데에 필요한 태그와 요소들을 전부 배웠다. 웹 페이지를 형성하는 데에 필수적인 요소들을 포함하고 불필요한 요소들은 전부 배제한 페이지다. 그렇다면 인터넷에서 웹 페이지들 간의 이동은 어떻게 하냐? 서버 : 웹 페이지를 제공하는 컴퓨터 쪽 클라이언트 : 제공된 웹 페이지를 소비하는 컴퓨터 쪽 ex)게임 클라이언트 설치 등등 우리가(클라이언트) 웹 페이지를 요청하면(request) 제공자들은(서버) 이에 응답해서(response) 우리에게 컴퓨터의 언어로 코드를 전달하여 우리가 그 정보를 볼 수 있다. 그리고 누구나 '서버'가 될 수 있다. 다만 이는 복잡하고 필요한 지식이..

생활코딩 2일차 [21.01.05] - HTML

- 목차에 관련된 태그와 부모 자식이라는 비유적 특성 → 목차를 만듦 list (목록, 목차)의 의미를 가진 태그이다. 그리고 이 태그는 필연적으로 부모-자식의 특성을 가진다. &는 자식의 성질 -> 부모의 태그로 감싸주어야 한다. → 식으로 li를 감싸주는 부모 특성의 태그 unordered list 라는 의미 -> unordered : 순서가 매겨지지 않았다 -> 그냥 나열 → 식으로 li를 감싸주는 부모 특성의 태그 ordered list 라는 의미 -> ordered : 순서가 매겨져있다 -> 알아서 순서를 매겨줌 : 1. , 2. , 3. ... 이런 식으로 & 과 는 무조건 같이 써야 한다! - 문서, 웹페이지의 구조에서 통상적으로 쓰이는 구조 그리고 이에 가장 자주 쓰이는 슈퍼스타 태그 5가..

생활코딩 공부 1일차 [21.01.04] - HTML

줄 바꿈과 관련한 태그는 두 가지가 존재한다. 바로 ,와 & → 줄바꿈 + 문단 간의 한 칸 띄움 'paragraph' (문단)의 의미를 가진 태그이다. 다른 태그들과 마찬가지로 코드를 앞, 뒤로 감싸면서 감싸준 코드가 하나의 문단이라는 뜻을 컴퓨터에게 전달한다. 우리나라에서 새로운 문단임을 나타내는 방법은 첫 글자 앞에 띄어쓰기를 해주는 것이다. 하지만 미국에서는 문단 간에 간격을 띄움으로써 문단임을 나타내기 때문에 , 태그를 이용하면 자동으로 문단 간에 약간의 줄 띄움이 적용된다. → 줄 바꿈 'line breaking'이라는 의미를 가진 태그이다. 이 태그는 paragraph의 태그와는 달리 코드를 앞, 뒤로 감싸줄 필요없이 그저 줄을 바꾸고 싶은 문장에다가 붙여준다. 쉽게 말해서 한글 파일에서 타..