css3
![[2021/12/17]국비지원 CSS3 1-(3) 하위선택자](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FSXiun%2Fbtrr7p6yvu1%2FAAAAAAAAAAAAAAAAAAAAADhyQMURXKvrNNzGm1-1IA5-Zqzp37W_0YMFfhd6r9hW%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3D3r46jVsLfXSeTTs1TPIxmEPQgj8%253D) 
                    
                    [2021/12/17]국비지원 CSS3 1-(3) 하위선택자
CSS3 element와 element는 조합해서 쓸 수 있다. 상위 element의 class 또는 id와 하위 element 조합 방식도 가능하고, 상위 element 중위 element 하위 element 이런 방식 역시 ok 하위선택자 하위 선택자에 대해 알아봅시다. 2선택자와 선택자는 서로 조합하여 사용할 수 있다. 3이 때 하위 선택자 방식을 이용할 경우 특정 선택자 안에 포함된 하위 요소들을 선택하여 스타일을 지정할 수 있습니다. 결과물
![[2021/12/17]국비지원 CSS3 1-(2) 표시 우선순위](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FF6HCm%2Fbtrr2XQIVpI%2FAAAAAAAAAAAAAAAAAAAAAKqTq_CCu6YHkgqA3i2NRyRdFpa4rO-_6zj9rTFbL1nc%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3D6ROiTJl85gV1lV2Au%252FgIG24Yg3c%253D) 
                    
                    [2021/12/17]국비지원 CSS3 1-(2) 표시 우선순위
CSS3 무엇도 설정하지 않은 단순 element, type : 우선순위 1점 class : 우선순위 10점 id : 우선순위 100점 style="" : inline 스타일로 따로 지정한 경우 우선순위 1000점 중괄호 { } 안에 항상 ; 필수 css 디자인 표현 css는 기본적으로 선택자, 속성, 값을 가진다. 내부 스타일시트, 외부 스타일시트, 인라인 스타일, 태그에 직접 삽입하기 선택자에는 스타일 적용대상 지정하고 {} 안에 적용할 스타일을 넣는다 스타일은 속성을 기록하고 :로 구분한 후 값 입력한다 값을 기록한 뒤에 ;로 마무리 하고 추가로 다른 속성과 값을 계속 넣을 수 있다 ▶ CSS3, javascript 등 다른 언어의 텍스트 양이 얼마 되지 않을 때는 html과 같은 창에 입력해도 괜..
![[2021/12/17]국비지원 CSS3 1-(1)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FPV5uw%2Fbtrr2z3Bjpe%2FAAAAAAAAAAAAAAAAAAAAAF0mDi15bFlmDUzmWsYAArz78Vfw9wmbMYVNqvcZZNsx%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3DgLmtMQZSaTCer1pHIJqZguroBXc%253D) 
                    
                    [2021/12/17]국비지원 CSS3 1-(1)
CSS3 css 주석 /* */ selector { property : value ; } 동일한 property에서 값만 다르게 반복할 경우 최종 값으로 출력 단계적으로 적용되는 스타일 단계적으로 적용되는 스타일 단계적으로 적용되는 스타일 결과물
![[2021/12/16]국비지원 HTML5 코딩툴 기본학습 8 커피빈 index 마크업](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FvyNi3%2Fbtrr3jepHib%2FAAAAAAAAAAAAAAAAAAAAAIyHVb-iA_RAz0I_bsEWn2B6hGBc0d-TXH0v_ySGLgZc%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3DmQcPQr3WKeHPLU4X1FB90f7krv4%253D) 
                    
                    [2021/12/16]국비지원 HTML5 코딩툴 기본학습 8 커피빈 index 마크업
이 날은 하루종일 커피빈 홈페이지의 메인화면만 html5 마크업 한 날. 코드 보면 죄다 ul li 임을 알 수 있다. 담임강사의 코딩스타일이 그러할 뿐 굳이 ul li로만 묶지 않아도 되고, 본문 영역 나눌 때 div로 크게 묶어놓고 내용을 목록으로 했을 때 더 의미가 있거나 적절하다 싶을 때 ul li를 쓰면 될 듯 하다. 당시 사이트화면 작업 내용 본문 바로가기 topmenu 로그인 매장찾기 체용정보 단체 및 기업구매 고객서비스 회원정보 안내 BUY ONLINE View All ♥2021 커피빈몰 BEST AWARDS♥ 재고 한정 품목 할인 상품 분쇄형 커피 드립백 소풍커피 파우치 커피 ♥NEW♥파우치 커피 캡슐커피 ♥NEW♥네스프레스 호환용 CBTL 호환용 원두 원두가이드 MD's Pick 라이트..
![[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(5) 과제: 전기계 공기업 공지사항 페이지 마크업](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbFSkkd%2Fbtrr17lywoJ%2FAAAAAAAAAAAAAAAAAAAAAH6ZkpfbxKbsNP3A8-PQjGTuPqWe-hPE9MCKfobQiZXz%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3DRzvUEEfSaEJq1ie4gB948lBzDvU%253D) 
                    
                    [2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(5) 과제: 전기계 공기업 공지사항 페이지 마크업
이 날의 과정 1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출 2. video 태그 3. audio 태그 4. 기타 요소 태그 5. 한국남부발전공사 공지사항 페이지 마크업 아마 후에 올리는 과제를 보면 다들 알아채겠지만... 담임강사가 제일 좋아하는 페이지 : 공지사항 or 경영정보, 채용정보 ( 항목 10개 이상이어야 하며 1개일 경우 임의로 10개 채우도록 함 = table 태그 ) 문의 ( 항목 개수 필히 5개 이상이어야만 함 = form 양식 ) 그리고 내가 이거 꼭 해야 의미 있냐? 싶게 생각하는 페이지 역시 저 2종.. 요즘은 카톡이 대세올습니다.. 예.. 채용정보는 심지어 사이트 따로 빼놓는 곳이 더 많사옵니다... 강사님.. 한국남부발전|주| 공지사항 총 게시..