웹디자인기능사 실기
웹디자인기능사
docs.google.com
[확장자]
.jpg .png .html .css
[파일]
확장자가 붙어있는 것
[폴더]
파일을 정리해주는 역할(확장자가 붙어있지 않음)
[태그]
- 태그마다 기본적으로 display가 들어있다.
- 크게 3가지로 나뉜다.
block(그 외 전부 block) -> div, nav, header, footer, ul, li, h
ㄴwidth가 auto 일때 100%값으로 나타난다(상위엘리먼트 너비만큼 상속)
inline -> a, img, span
ㄴwidth,height 속성을 사용할 수 없다
ㄴinline태그에 너비높이 속성을 사용하고 싶으면 다른 display로 (block, inline-block) 바꿔서 사용한다
ㄴblock과 다르게 한줄에 같이 배치된다
inline-block
초기설정
- 파일 -> 자동저장
- 파일 -> 기본설정-> 설정
폰트사이즈 :16
탭사이즈 : 2
Line number -> off ( 줄번호끄기 )
cursor width -> 4 ( 커서넓이)
hover -> 표시 여부 체크해제 ( 태그설명 끄기 )
line-height : 1.6
- 파일 -> 기본설정-> 테마 -> 색테마 -> monokai(흐릿한)
단축기
ctrl+B: vscode탐색기 열기/닫기
window + E : 파일탐색기 열기
window + S : 돋보기 검색
ctrl + T : 새 탭 열기
ctrl + W : 새 탭 닫기
필수사항
- style.css 링크 연결
https://codepen.io/limyena/pen/YzMmyME
block특징
...
codepen.io
https://codepen.io/limyena/pen/MWRNKgY
inline
...
codepen.io
https://codepen.io/limyena/pen/yLrmeyL?editors=1100
inline-block 특징
...
codepen.io
https://codepen.io/limyena/pen/mdgNVwz
여백
...
codepen.io
https://codepen.io/limyena/pen/zYXgrqo
a태그
...
codepen.io
https://codepen.io/limyena/pen/rNbXxLL?editors=1100
block 정렬
...
codepen.io
https://codepen.io/limyena/pen/PogMZEg
text요소 정렬
...
codepen.io
https://codepen.io/limyena/pen/KKYOVoV
line-height
...
codepen.io
block / inline
[block과 inline-block이 나누어져있는 이유]
위에서 보는 이미지 처럼 한줄에 하나씩 배치되는 레이아웃도 있고
그 안에서 한줄에 같이 배치되는 레이아웃이 구분되어 있기 때문에 block과 inline-block으로 나누어져 있다.
(디자인과 마크업 연관지어 이해하기)기본적으로 마크업은 디자이너가 디자인툴을 사용해서 디자인한 결과물을
웹 브라우저에 띄워주는 용도로 사용된다.
디자이너의 디자인을 보게되면 한줄에 같이 배치되는 디자인도 있고
한줄에 하나씩 배치되는 레이아웃들이 구분되어 있고
이 구분점을 만들어주기 위해 block과 inline-block같은 시스템을 만들었다고 이해하면 좋다.
inline상태에선padding-top이 제대로 작동하지않는다
(글씨가 고정된 상태로 패딩값이 들어가기때문에 공간이 부족하면 제대로 구현되지 않음)
↓ 해결방법
5/11
https://codepen.io/limyena/pen/oNRNKPZ
float
...
codepen.io
- float : 공중에 떠다니다 / 한줄로 배치해주는 속성
- float을 활용해서 객체를 한줄에 같이 배열하고 싶은 경우 첫째나 막내한테만 float을 적용하면 적용되지 않고, 객체 전체 적용해야한다
- 상위엘리먼트에도 높이를 지정해줘야한다
- vscode 초기 셋팅(링크연결)
- js를 가장 늦게 실행되도록 해준다. 꼭 입력해야함
- defer속성은 자바스크립트 속성을 늦게 실행시킨다는 기능을 가지고있기 때문에
제이쿼리 링크에 사용하는 것이 아닌 자바스크립트 파일에 연결해줘야한다.
https://codepen.io/limyena/pen/zYQxOqN
팝업
...
codepen.io
- 중앙정렬
5/18
https://codepen.io/limyena/pen/rNgxeQa
this
...
codepen.io
5/25
https://codepen.io/limyena/pen/LYoRxrb
hover
...
codepen.io
[자동완성 안될때]
