반응형 💻 1. 웹개발_Front end/1-3 CSS18 [CSS] 05-3 표 스타일 1. caption-side 속성 – 표 제목 위치 정하기 ① caption은 기본으로 표 위쪽에 표시됨. ② 기본형 caption-side: top | bottom ③ 속성 값 2. Border 속성 – 표 테두리 스타일 결정하기 ① 표의 바깥 테두리와 셀 테두리 모두 지정해야 됨. 프로축구 경기 일정 울산 울산 vs 인천 부산 부산 vs 대전 서울 서울 vs 강원 3. border-collapse 속성 – 테두리 통합, 분리하기 ① 표 테두리와 셀 테두리를 합칠 것인지 설정 ② 기본형 border-collapse: collapse | separate ③ 속성 값 프로축구 경기 일정 울산 울산 vs 인천 부산 부산 vs 대전 서울 서울 vs 강원 4. border-spacing 속성 – 인접한 셀 테두.. 2021. 9. 5. [CSS] 05-2 다단으로 편집하기 1. column-width – 단의 너비 고정하고 다단 구성하기 ① 화면이 커지면 단의 개수가 많아짐 ② 기본형 column-width: | auto ③ 속성 값 건강에 좋은 식품 - Super Food 코코넛 오일 남미 파나마에서는 “코코넛오일 한 컵이면 모든 병이 낫는다”라고 이야기할 정도로 그 효능이 뛰어나다. 코코넛 오일에 들어있는 중사슬 지방산은 콜레스테롤 수치에 나쁜 영향을 주지 않는 건강한 지방산이다. 또 라우르산이 풍부해 세균을 물리치고 염증을 가라앉히는 효과가 있다. 하루 권장량은 성인기준 2~4스푼(30~40mL) 정도이다. 아보카도 나무에서 열리는 버터라고 불릴 만큼 몸에 좋은 지방인 오메가 3와 단백질, 비타민 E와 같은 항산화 성분이 풍부한 과일이다. 알파 카로틴이 풍부하게 들어.. 2021. 9. 5. [CSS] 05-1 CSS 포지셔닝과 주요 속성들 1. CSS 포지셔닝이란? ① CSS를 이용해 웹 문서 요소를 적절히 배치하는 것 * 2단 레이아웃 2. box-sizing 속성 – 박스 너비 기준 정하기 ① 웹 문서에 여러 요소를 배치하려면 각 요소의 너비 값을 기준으로 해야되는데 width 속성은 박스 모델 전체의 너비가 아니고 콘텐츠 부분의 너비임. 따라서 패딩이나 테두리 크기는 따로 계산해야됨 ② box-sizing 속성을 사용하면 width 속성을 콘텐츠 영역의 너비 값으로 할지 요소의 너비 값으로 할지 지정 가능 ③ 기본형 box-sizing: content-box | border-box ④ 속성 값 box-sizing box-sizing 3. float 속성 – 왼쪽이나 오른쪽에 배치하기 ① 웹 요소를 문서위에 떠있게 만듬. 왼쪽 구석이나.. 2021. 9. 5. [CSS] 04-3 여백을 조절하는 속성들 1. margin 속성 – 요소 주변 여백 설정하기 ① 현재 요소 주변의 여백. 한 요소와 다른 요소 사이의 간격 조절 ② ③ margin 속성에서 사용 가능한 속성 값들 ④ margin 속성 값 개수에 따른 차이 - 1개 : 네 방향 모두 동일한 값 적용 - 2개 : 첫 번째 값은 위아래, 두 번째 값은 좌우 margin 값 - 3개 : 빠진 값은 마주 보는 방향의 속성 값 사용 - 4개 : top -> right -> bottom -> left 순으로 적용 p {margin: 50px;} /*네 방향 마진 모두 50px*/ p {margin: 30px 50px;} /*위아래 마진 - 30px, 좌우 마진 - 50px*/ p {margin: 30px 20px 50px;} /*위 마진 - 30px, 좌우.. 2021. 9. 5. [CSS] 04-2 테두리 관련 속성들 1. border-style 속성 – 테두리 스타일 지정하기 ① 기본 값이 none이기 때문에 화면에 테두리가 표시되지 않음 ② 테두리를 그리기 위해서는 맨 먼저 테두리 스타일부터 지정 ③ ④ border-style에 지정 가능한 속성 값들 abcd 2. border-width 속성 – 테두리 두께 지정하기 ① ② border-width 속성 값의 개수에 따른 변화 - 1개 : 네 방향 모두 동일한 두께 - 2개 : 위아래, 좌우 묶어서 두께 적용 - 4개 : top -> right -> bottom -> left 순으로 두께 적용 3. border-color 속성 – 테두리 색상 지정하기 ① ② 방향이 있는 속성은 각 방향의 테두리 색상을 지정하고 방향이 없는 속성인 border-color 속성은 네 .. 2021. 9. 5. [CSS] 04-1 CSS와 박스 모델 1. 블록 레벨 요소와 인라인 레벨 요소 ① 블록 레벨 요소 - 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소로 요소의 너비가 100%라는 의미 - 해당 요소 좌우에는 다른 요소들이 올 수 없음 - 너비나 마진, 패딩 등을 이용해 크기나 위치 지정 ② 인라인 레벨 요소 - 줄을 차지하지 않는 요소 - 화면에 표시되는 콘텐츠만큼 영역을 차지하고 나머지 공간에 다른 요소 올 수 있음 - 한 줄에 여러 개의 인라인 레벨 요소 표시 가능 ③ 블록 레벨 요소와 인라인 레벨 요소를 만드는 태그의 종류 시간이란.. 내일 죽을 것처럼오늘을 살고 영원히 살 것처럼내일을 꿈꾸어라. 2. 박스 모델(box model) – 박스 형태의 콘텐츠 ① 블록 레벨 요소들은 모두 박스 형태 ② 박스 형태의 요소들을 박스 모델이라고 .. 2021. 9. 5. [CSS] 03-3 그라데이션 효과로 배경 꾸미기 1. 그라데이션과 브라우저 접두사 ① 그라데이션은 크기가 없는 배경 이미지이므로 background-image나 background 속성에서 사용 ② 그라데이션 속성은 표준화 됨 ③ 하지만 구형 모던 브라우저에서는 브라우저 접두사를 붙여야 동작함 2. 선형 그라데이션 ① 수직 방향이나 수평 방향 또는 대각선 방향으로 색상이 일정하게 변하는 것 ② 선형 그라데이션 지정 시 방향과 색상 필요 ③ 기본형 linear-gradient( to , color-stop, [color-stop, ..]); ※ 위 구문이 표준 구문이지만 ‘위치’와 ‘각도’를 표시하는 방법이 중간에 몇 번 바뀌다 보니 브라우저별, 버전별 사용법이 조금씩 다름 ④ 방향 : 끝 지점을 기준으로 ‘to’키워드와 함께 사용 ⑤ 각도 - 그라데이.. 2021. 9. 5. [CSS] 03-2 배경 색과 배경 이미지 1. background-color 속성 – 배경 색 지정하기 ① 배경 색을 넣을 요소에 배경 색을 지정할 때 사용 ② 기본형 : background-color : ③ 종류 : ④ 배경색은 상속되지 않음. 세계 3대 미항 세계 3대 미항 시드니(Sydney), 호주 리우데자네이루(Rio de Janeiro), 브라질 나폴리(naples), 이탈리아 2. background-clip 속성 – 배경 적용 범위 조절하기 ① 배경을 어디까지 적용할지 지정 ② 기본형 : background-clip 속성 - 배경 적용 범위 조절하기 ③ 사용 가능한 속성 값 Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interd.. 2021. 9. 5. [CSS] 03-1 웹에서 색상 표현하기 1. 16진수 표기법 ① #ffffff 처럼 #과 함께 6자리의 16진수로 표시 ② 앞에서부터 두자리씩 묶어 빨강, 초록, 파랑의 양을 나타냄 ③ 하나도 섞이지 않았을 때는 00, 가득 섞였을 때는 ff로 표시 (000000 = 검은색, ffffff = 흰색) ④ 두 자리씩 중복될 경우 줄여 사용할 수 있음 ex) #ffff00 -> #ff0, #cccccc -> #ccc 2. rgb와 rgba 표기법 ① color : rgb(255,0,0)처럼 세 자리의 숫자로 표시 ② 앞의 숫자부터 빨강, 초록, 파랑의 양을 나타냄 ③ 하나도 섞이지 않았을 때는 0, 가득 섞였을 때는 255 ④ 투명도를 조절할 때는 color : rgba(255, 0, 0, 0.3) 처럼 마지막에 알파값 추가 ⑤ 알파값은 불투명도를.. 2021. 9. 5. [CSS] 02-4 목록과 링크 스타일 1. list-style-type 속성 – 목록의 불릿과 번호 스타일 지정하기 ① 일 경우 불릿 모양을 변경할 때, 일 경우 번호 스타일 지정할 때 사용 ② 기본형 : list-style-type : none | | ③ 의 불릿 모양 바꾸기 ④ 에서 불릿 없애기 ul { list-style-type:none; } ⑤ 에서 숫자 바꾸기 도서 시리즈 Do it! 시리즈 된다 시리즈 DCM 프로 사진가 데이터과학 시리즈 Do it! 시리즈 된다 시리즈 DCM 프로 사진가 데이터과학 시리즈 2. list-style-image 속성 – 불릿 대신 이미지 넣기 ① 에서 불릿을 이미지로 변경 가능 ② 기본형 : list-style-image : url(이미지 파일 경로) | none ③ 사용 가능한 속성 값 도서 시.. 2021. 9. 5. [CSS] 02-3 문단 스타일 1. direction 속성 – 글자 쓰기 방향 지정하기 ① 텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지를 결정 ② 기본형 : direction : ltl | rtl ③ 사용 가능한 속성 값 2. text-align 속성 – 텍스트 정렬하기 ① 문단의 텍스트 정렬 방법 지정 ② 기본형 : text-align : start | end | left | right | center | justify | match-parent ③ 사용 가능한 속성 값 Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida.. 2021. 9. 5. [CSS]02-2 텍스트 스타일 1. color 속성 – 글자 색 지정하기 ① 글자 색상 지정할 때 사용 ② 16진수 값, rgb값, hsl 값, 색상 이름으로 표시 가능 ③ 기본형 : color : 세계 3대 미항 세계 3대 미항 시드니(Sydney), 호주 리우데자네이루(Rio de Janeiro), 브라질 나폴리(Naples), 이탈리아 2. text-decoration 속성 – 텍스트에 줄 표시하기/없애기 ① 텍스트에 밑줄을 긋거나 취소 선을 표시할 때 사용 ② 링크 텍스트의 밑줄 없앨 때도 사용 ③ 기본형 : text-decoration : none | underline | overline | line-through ④ 사용 가능한 속성 값 세계 3대 미항 세계 3대 미항 시드니(Sydney), 호주 리우데자네이루(Rio de.. 2021. 9. 5. [CSS] 02-1 글꼴 관련 스타일 1. font-family 속성 – 글꼴 지정하기 ① 기본형 : body { font-family : "맑은 고딕", 돋움, 굴림 } /* 맑은 고딕이 없으면 돋움으로, 돋움이 없으면 굴림으로 적용*/ ② 웹 문서에서 사용할 글꼴 지정 ③ 를 비롯해 나 ~ 처럼 텍스트를 사용하는 태그에서 사용 ④ 웹 문서에서 글꼴을 지정할시 한 가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우를 대비하여 두세 번째 글꼴까지 지정, 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분 ⑤ font-family 속성은 상속되기 때문에 스타일에서 정의하면 문서 전체에 적용되고 자식 요소에 계속 같은 글꼴이 사용됨 ⑥ 일부 태그에서 다른 글꼴을 사용하고 싶을 때는 태그 선택자, 클래스 선택자를 이용해 해당 요소에 다.. 2021. 9. 5. [CSS] 01-5 CSS3와 CSS 모듈 1. CSS3란? ① CSS가 스타일 시트의 기본이 되면서 CSS1과 CSS2를 거쳐 스타일 시트가 많이 알려졌고 널리 사용되고 있음 ② HTML5가 개발되면서 CSS3 기술도 함께 개발되었으며 CSS2보다 정교하고 화려한 화면을 구성할 수 있고 애니메이션까지 지원 가능 ③ CSS2 규약 안에는 스타일과 관련된 것들이 한꺼번에 담겨 있어서 크고 복잡해하여 한 번에 업데이트하기 쉽지 않음 ④ CSS3부터는 배경이나 글꼴, 박스 모델 등 수십 개 기능에 대한 규약을 주제별로 따로 생성함. 이것을 CSS 모듈이라함 ⑤ CSS 유효성 검사 https://jigsaw.w3.org/css-validator/ ⑥ CSS 관련 뉴스 및 CSS 규약 확인 https://www.w3.org/Style/CSS/ 2. CSS.. 2021. 9. 5. [CSS] 01-4 캐스캐이딩 스타일 시트 (CSS : Cascading Style Sheet) 1. 캐스캐이딩(Cascading)의 의미 ① 캐스캐이딩(Cascading)은 위에서 아래로 흐른다는 의미 ② ‘캐스캐이딩’은 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정하는 것을 뜻함 ③ 스타일이 동시에 적용될 때 스타일 간 충돌을 막기 위한 방법이 위에서 아래로 흐르며 적용되는 방법 ④ 위 방법에는 두 가지 원칙이 존재 - 스타일 우선순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용됨 - 스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달 2. 스타일 우선순위 ① 스타일 우선순위는 캐스캐이딩에서 가장 중요한 개념 ② 우선순위는 다음의 세 가지 개념에 따라 지정됨. 중요.. 2021. 9. 5. 이전 1 2 다음 반응형
