PLAYCE

Develop/WEB2 - CSS 검색 결과

해당 글 15건

[6일차] #15. 수업을 마치며

6일차 1. CSS 등장 (30분) - 수업소개 - CSS 등장 이전의 상황 - CSS의 등장 - 혁명적 변화2. CSS 속성을 스스로 알아내기 (8분) 3. CSS 선택자를 스스로 알아내는 방법 (15분)4. 박스모델 (16분)5. 그리드 (10분)6. 반응형 디자인 (9분)7. CSS 코드의 재사용 (12분)8. 수업을 마치며 (15분) #15. 수업을 마치며 선택자 & 속성 □ 선택자 : 정확하게 표현□ 속성 : 표현력 주어와 서술어의 관계

Develop/WEB2 - CSS 2018. 12. 12. 21:22

[6일차] #14. CSS 코드의 재사용

6일차 1. CSS 등장 (30분) - 수업소개 - CSS 등장 이전의 상황 - CSS의 등장 - 혁명적 변화2. CSS 속성을 스스로 알아내기 (8분) 3. CSS 선택자를 스스로 알아내는 방법 (15분)4. 박스모델 (16분)5. 그리드 (10분)6. 반응형 디자인 (9분)7. CSS 코드의 재사용 (12분)8. 수업을 마치며 (15분) #14. CSS 코드의 재사용▲ 다른 웹페이지에도 동일하게, CSS 스타일 태그 및 id선택자 입력하기 ▲ style.css 만들기 □ 코드수정 일원화를 위해 ⇒ style.css 만든 후,

Develop/WEB2 - CSS 2018. 12. 12. 20:57

[5일차] #13. 미디어 쿼리 써먹기

5일차 1. CSS 등장 (30분) - 수업소개 - CSS 등장 이전의 상황 - CSS의 등장 - 혁명적 변화 2. CSS 속성을 스스로 알아내기 (8분) 3. CSS 선택자를 스스로 알아내는 방법 (15분) 4. 박스모델 (16분) 5. 그리드 (10분) 6. 반응형 디자인 (9분) 7. CSS 코드의 재사용 (12분) 8. 수업을 마치며 (15분) #13. 미디어 쿼리 써먹기 ▲ 화면 너비가 800을 넘지 않는 경우, 그리드 나누지 않기 (display: block;) ▲ 화면 너비가 800을 넘지 않는 경우, 오른쪽 선 안보이게 하기 ▲ 화면 너비가 800을 넘지 않는 경우, 바닥 선 안보이게 하기 ▲ 화면 너비가 800을 넘는 경우의 화면

Develop/WEB2 - CSS 2018. 12. 12. 17:55

[5일차] #12. 미디어 쿼리 소개

5일차 1. CSS 등장 (30분) - 수업소개 - CSS 등장 이전의 상황 - CSS의 등장 - 혁명적 변화 2. CSS 속성을 스스로 알아내기 (8분) 3. CSS 선택자를 스스로 알아내는 방법 (15분) 4. 박스모델 (16분) 5. 그리드 (10분) 6. 반응형 디자인 (9분) 7. CSS 코드의 재사용 (12분) 8. 수업을 마치며 (15분) #12. 미디어 쿼리 소개 ▲ 초록색 테두리 만들기 ▲ 너비 확인하기 ▲ 미디어 쿼리 통해 화면 조정하기 □ @media(min-width):800px → 화면이 800px 이상인 경우, '이벤트' 적용 □ @media(max-width)800px → 화면이 800px 이하인 경우, '이벤트' 적용

Develop/WEB2 - CSS 2018. 12. 12. 17:11

[4일차] #11. 그리드 써먹기

4일차 1. CSS 등장 (30분) - 수업소개 - CSS 등장 이전의 상황 - CSS의 등장 - 혁명적 변화 2. CSS 속성을 스스로 알아내기 (8분) 3. CSS 선택자를 스스로 알아내는 방법 (15분) 4. 박스모델 (16분) 5. 그리드 (10분) 6. 반응형 디자인 (9분) 7. CSS 코드의 재사용 (12분) 8. 수업을 마치며 (15분) #11. 그리드 써먹기 ▲ 그리드 태그를 이용해, 너비 조정하기 ▲ 너비 설정해주기 ▲ id 선택자를 활용하여, 너비 조정하기

Develop/WEB2 - CSS 2018. 12. 12. 15:58

[4일차] #10. 그리드 소개

4일차 1. CSS 등장 (30분) - 수업소개 - CSS 등장 이전의 상황 - CSS의 등장 - 혁명적 변화 2. CSS 속성을 스스로 알아내기 (8분) 3. CSS 선택자를 스스로 알아내는 방법 (15분) 4. 박스모델 (16분) 5. 그리드 (10분) 6. 반응형 디자인 (9분) 7. CSS 코드의 재사용 (12분) 8. 수업을 마치며 (15분) #10. 그리드 소개 ▲ 태그와 태그의 차이 ▲ 클래스 값과 id값을 활용한 테두리 만들기 ▲ 그리드 값을 활용한 너비 조정 □ 150px (오른쪽 그리드 고정) / 1fr (왼쪽 그리드 - 화면 크고작음에 따라 늘어나고 줄어듬) → PC / 태블릿 / 모바일 화면맞춤시 유용 □ fr : 화면 전체 조정 (예: 2fr 1fr ) ⇒ 화면 전체를 3등분 했을..

Develop/WEB2 - CSS 2018. 12. 12. 15:19

[3일차] #9. 박스모델 써먹기

3일차 1. CSS 등장 (30분) - 수업소개 - CSS 등장 이전의 상황 - CSS의 등장 - 혁명적 변화 2. CSS 속성을 스스로 알아내기 (8분) 3. CSS 선택자를 스스로 알아내는 방법 (15분) 4. 박스모델 (16분) 5. 그리드 (10분) 6. 반응형 디자인 (9분) 7. CSS 코드의 재사용 (12분) 8. 수업을 마치며 (15분) #9. 박스모델 써먹기 ▲ 밑줄만 있는 박스 만들기 Htmlborder-bottom:1px solid gray; ▲ 좌우 구분줄 만들기 □ ⇒ 태그는 화면 전체를 통제 □ 크롬 콘솔을 이용하여, 조정하고자 하는 부분 체크 Html ol{ border-right:1px solid gray; width: 100px; margin:0; padding:20px; }

Develop/WEB2 - CSS 2018. 12. 10. 21:24

[3일차] #8. 박스 모델

3일차 1. CSS 등장 (30분) - 수업소개 - CSS 등장 이전의 상황 - CSS의 등장 - 혁명적 변화 2. CSS 속성을 스스로 알아내기 (8분) 3. CSS 선택자를 스스로 알아내는 방법 (15분) 4. 박스모델 (16분) 5. 그리드 (10분) 6. 반응형 디자인 (9분) 7. CSS 코드의 재사용 (12분) 8. 수업을 마치며 (15분) #8. 박스 모델 ▲ 링크 걸기 () ▲ 글자 꾸미기 □ 테두리 만들기 : border ⇒ 두께 : width / 색상 : color / 스타일 : style (예:점선,단선) ▲ display 스타일 □ 화면전체 테두리 설정 : Block level element □ 자신의 크기만큼 테두리 설정 : inline element CSS 주석처리하기 /* */..

Develop/WEB2 - CSS 2018. 12. 10. 20:13

[2일차] #7. CSS 선택자의 기본

2일차 1. CSS 등장 (30분) - 수업소개 - CSS 등장 이전의 상황 - CSS의 등장 - 혁명적 변화 2. CSS 속성을 스스로 알아내기 (8분) 3.. CSS 선택자를 스스로 알아내는 방법 (15분) 4. 박스모델 (16분) 5. 그리드 (10분) 6. 반응형 디자인 (9분) 7. CSS 코드의 재사용 (12분) 8. 수업을 마치며 (15분) #7. CSS 선택자의 기본 ▲ 글자색 '검은색' 설정 ▲ 클래스 '"saw', 글자색 회색으로 바꾸기 saw앞에 (.) ⇒ 마침표(punctuation)을 붙여야 읽힌다 (클래스 선택자) ▲ 클래스 선택자 순서에 따른 변경 CSS 태그 쪽 클래스선택자 위치가 후순위일수록, 적용에 대해 우선순위가 있다 ▲ id선택자를 통한 우선순위 해결 [우선순위] 태그..

Develop/WEB2 - CSS 2018. 12. 10. 15:05

[2일차] #6. CSS 속성을 스스로 알아내기

2일차 1. CSS 등장 (30분) - 수업소개 - CSS 등장 이전의 상황 - CSS의 등장 - 혁명적 변화 2. CSS 속성을 스스로 알아내기 (8분) 3.. CSS 선택자를 스스로 알아내는 방법 (15분) 4. 박스모델 (16분) 5. 그리드 (10분) 6. 반응형 디자인 (9분) 7. CSS 코드의 재사용 (12분) 8. 수업을 마치며 (15분) #6. CSS 속성을 스스로 알아내기 ▲ 폰트 사이즈 조절하기 검색 : css font size property ▲ 폰트 가운데 정렬하기 css text align center property ▲ 완성

Develop/WEB2 - CSS 2018. 12. 10. 14:09