css (7) 썸네일형 리스트형 [CSS] style.css를 사용한 중복 제거 오늘은 웹페이지에 변경 사항이 있을 경우 쉽게 변경하는 방법인 style.css를 배웠다. 이전까지는 .html 파일에 태그를 추가하였다. 이전에 사용했던 코드 CSSCascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. 이런 식으로 코드를 계속 작성할 경우 파일이 많아졌을 때 수정하기 번거로워진다. 이때 style.css를 이용하면 수정이 편리해진다. styel.css body{ margin:0; } a{ color:black; text-decoration:none; } h1{ font-size: 60px; text-.. [CSS] Media Query(미디어 쿼리) 소개와 활용 웹은 PC, 스마트폰 등 수많은 형태의 화면에 맞게 동작해야 한다. 즉 화면의 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀔 필요가 있어졌다. 이를 반응형 디자인이라 한다. 반응형 디자인이란 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 동작하게 되는 것 영어로는 responsive web, 한글로는 반응형 웹 또는 반응형 웹 디자인이라고 한다. 미디어 쿼리에서는 일반적으로 max-width 와 min-width을 많이 사용한다. 그외 높이(height), 색깔(color), 화면의 가로 세로 방향(orientation)화면의 가로 세로 방향 등이 있다. 실제 미디어 쿼리를 사용할 경우 @media라고 써야한다. @media 특정 조건이 참인 경우에만 규칙을 사용하여 CSS .. [CSS] Grid(그리드) 소개와 활용 오늘은 Grid를 배웠다. Grid를 사용하면 목록과 본문이 나란히 위치하는 디자인을 만들 수 있다. Grid를 사용하기 전, 두 개의 태그를 나란히 배치하고 싶으면 그것을 감싸는 부모 태그가 필요하다. 디자인 목적을 위해 어떤 의미도 없는 태그인 또는 을 사용한다. 태그는 block level element 이므로 줄바꿈, 태그는 inline element 줄바꿈 되지는 않는다. HTML CSS JavaScript CSS // 부분 , 부분을 나란히 배치하고 줄바꿈 싶어서 태그를 사용하여 묶었다. ... WEB HTML CSS JavaScript ... 첫번째 칼럼 태그와 두번째 칼럼 태그를 나란히 배치하면 그리드를 사용한 웹 사이트의 구체적인 디자인이 구현된다. 간격 조절을 위해 이전에 배웠던 box.. [CSS] box model의 기초 오늘은 CSS box model에 대해서 배웠다 box model이란, 디자인과 레이아웃이다. 여백, 테두리, 패디딩 및 모든 HTML 요소를 감싸는 상자를 뜻한다. box model을 살펴보기 전, 태그가 화면에 차지하는 크기 개념을 이해하기 위해 block level element, iline element를 이해하려고 한다. 태그마다 화면에 사용하는 크기가 다르다. 화면 전체를 쓰는 태그를 블록 레벨 엘리먼트(block level element), 자기 자신의 크기 콘텐츠 크기만큼을 쓰는 태그를 인라인 레벨 엘리먼트(inline element)라고 한다. 태그가 block level element 중 하나, 태그가 iline element중 하나이다. CSSCascading Style Sheets .. [CSS] Class 속성을 사용한 링크 색깔 변경 오늘은 Class에 대해서 배웠다. 엄밀하게 말하면 HTML에 해당되는 부분이다. Class란 같은 의도에 따라 묶여진 학생들을 하나로 그루핑할 때 사용하는 말이다. 즉, '하나로 묶는다'는 뜻이다. 이전까지는 sytle 속성을 인라인으로 적용해서 글씨 색깔을 변경 했었다. 이 방법보다는 Class 속성을 사용 하는 것이 더욱 편리하다. 사용 방법은 간단하다 1. 태그에 class 속성 지정 HTML CSS 2. class 값을 가진 태그의 글자색 변경 .saw{ color: gray; } 주의할 점은 태그 앞에 .를 붙여줘서 표기해야 한다. Class의 속성을 이용해서 링크 색깔을 조금 더 구체적으로 바꿔 보려고 한다. 웹 사이트의 모든 링크 -> black (완료) 사용자가 방문했던 링크 -> gra.. [CSS] text size property / text align property 오늘은 CSS text size property(글자 크기 조절), CSS text align property(정렬)을 배웠다. CSS text size property 영역에 변경하고 싶은 부분 (h1) 선택자를 추가하여 font-size 속성을 이용해 글자 크기를 변경하면 된다. font-size:원하는크기(px, %...); WEB CSS text align property 가운데 정렬을 하고 싶을 경우 영역에 변경하고 싶은 부분 (h1) 선택자를 추가하여 text-align 속성을 이용해 텍스트를 가운데 정렬하면 된다. WEB 그 외 다른 정렬을 하고 싶을 경우에는 참고해서 사용하면된다. [CSS] <style> 글씨 색깔 변경, 링크 밑줄 제거 글씨 색깔 변경 웹 사이트에 만든 글씨 색깔을 변경하고 싶다면 태그를 사용하면 된다. 링크 색깔을 빨간색으로 변경하고 싶으면 color:red; 을 사용하면 된다. 2.CSS 부분의 색깔만 변경하고 싶다면 2.html 부분에 style 속성을 사용하면 된다. 기존 코드 WEB HTML CSS JavaScript style 속성 추가한 코드 WEB HTML CSS JavaScript 2.CSS에만 글씨 변경이 된걸 확인했습니다. CSS 색깔 변경을 위해 가장 먼저 설명한 a{ color:black;}으로 바꾸고 진행했다. 링크 밑줄 제거 링크에 모든 밑줄을 제거하고 싶다면 a{ text-decoration:none;}를 추가하면된다. 특정 부분만 밑줄을 추가하고 싶다면, a{ text-decoration:.. 이전 1 다음
