일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- til
- 예외 처리
- 로켓펀치 #취준컴퍼니 #취업 #일상 #취준생
- try-catch-finally 블록
- throws 키워드
- 실행 예외
- 예외
- 다중 catch 블록
- 코딩테스트준비
- 99클럽
- 일반 예외
- 개발자취업
- 예외클래스
- 항해99
- Today
- Total
목록FE/HTML CSS 자바 스크립트 (51)
innn
안에 타이틀 아래에 스타일 속성들을 넣어준다 이때 속성들을 바로 넣어주지 않고 링크로 연결시켜 줄 때 쓰는 코드. 여기서 rel과 href 는 정확히 어떤 뜻인가? rel rel은 릴레이션을 축약한 것. 관계라는 뜻. 태그에 들어갈 링크가 현재 페이지와 어떤 관계를 갖는 지를 설명해주는 속성이다. 즉 link rel = "~~" 달리는 링크와 현재 페이지는 ~~ 라는 관계라는 것을 알려주는 것. 위의 예시에선 stylesheet. CSS임을 알려주는 듯이다. href href는 hypertext reference의 약자다. 실제로 이동할, 페이지의 주소를 연결해주는 속성이다. href 뒤에 주소를 적어주면 된다. 여기선 css/structure.css 였다. (css 폴더의 structure라는 css ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cnw51P/btrIPVHKup5/IOpFl0dpDUHytlFA01Oqc0/img.png)
함수 실행문을 앞에 두고 선언 부분을 뒤에 위치해도 앞으로 끌어올려 인식한다. 이게 자바와 다른점... 호이스팅 블록 안에 있는 변수는 let을 쓰자. 근데 es6니까 이제는 var 보단 let을 쓰라고 하셨다. 전역변수는 최소한으로 사용, var변수를 쓴다면 시작부분에서 선언해야 한다. 이벤트가 발생하는 html 태그에 이베트 처리기를 직접 연결할 때 씀. ppt 사진에선 alert함수가 이벤트 핸들러다. 이전 페이지 불러올때 씀.
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/qkH7O/btrIJ7aGtqQ/zfFpyXfF8oaIkbgsN0lYn1/img.png)
section p { .. } 섹션 안에 있는 모든 p에 적용한다. 바로 밑에 있는 자식 요소뿐만 아니라 손자, 손자의 손자 요소 등 모든 하위 요소까지 적용하는 것. 상위 요소 하위 요소를 나란히 쓰면됨. 섹션 및에 있는 자식요소만 된다는 뜻 가상 클래스 선택자 종류 한 번씩 실습해보기 반응형 웹 다양한 화면 크기에 맞게 웹사이트를 표시하는 방법이다. (내용은 그대로 유지하면서) pc 화면과 모바일 화면이 픽셀이 서로 다름 그러다 보니 모바일 화면에 의도한대로 표시되지 않을 때가 있음. 실제 pc화면보다 훨씬 작으니까. 그래서 뷰포트라는 것은 스마트폰 화면에서 실제 내용이 표시되는 영역을 우리는 뷰 포트라고 하는데 그 표시되는 영역에 맞춰서 뷰포트를 지정하면 기기 화면에 맞춰 내용을 표시할 수 있다.
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/d5fHWz/btrII1A7WYd/wfKDqSi34UCZcY2BhkorR0/img.png)
section p { .. } 섹션 안에 있는 모든 p에 적용한다. 바로 밑에 있는 자식 요소뿐만 아니라 손자, 손자의 손자 요소 등 모든 하위 요소까지 적용하는 것. 상위 요소 하위 요소를 나란히 쓰면됨. 섹션 및에 있는 자식요소만 된다는 뜻 가상 클래스 선택자 종류 한 번씩 실습해보기 반응형 웹 다양한 화면 크기에 맞게 웹사이트를 표시하는 방법이다. (내용은 그대로 유지하면서) pc 화면과 모바일 화면이 픽셀이 서로 다름 그러다 보니 모바일 화면에 의도한대로 표시되지 않을 때가 있음. 실제 pc화면보다 훨씬 작으니까. 그래서 뷰포트라는 것은 스마트폰 화면에서 실제 내용이 표시되는 영역을 우리는 뷰 포트라고 하는데 그 표시되는 영역에 맞춰서 뷰포트를 지정하면 기기 화면에 맞춰 내용을 표시할 수 있다.
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/IfUH6/btrIi0kbgos/gVcO2Et3D88IWVTcBkPeqK/img.png)
태그 중요하다. 많이쓰임. 사진 옆에 왼쪽 오른쪽 지정해서 딱 붙게 설정할 수 있는 태그 레이아웃 배치할때 정말 중요해서 잘 갖고 놀아야한다고 하셨다. auto는 원래 배경 이미지 크기 만큼만 표시된다. 디폴트값임.
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/uc95L/btrIipw4054/Qc9ilDRu5msXGKvfustKDk/img.png)
웹폰트 사용하기. 폰트를 다운 받지 않고서도 폰트를 지정할 수 있다. 클라이언트나 개발자가 폰트를 굳이 다운받아 설치하지 않더라도 웹 자체에서 모두 동일하게 보여주는 방법이었다. font.google.com 으로 들어가서 랭귀지 지정 후 (나의 경우엔 코리언으로 해놓고) Regular + 버튼 클릭 후 view 창에 임포트를 선택해 태그를 복사만 하면 끝! 편리하고 신기한 기능이었다. 새로 메뉴를 만든다면 목록에서 불릿을 없애고 마진과 패딩을 사용해 배열하는 게 좋다 보더박스는 테두리까지 포함해서 너비값을 지정한다. 실제 박스 모델의 너비를 계산할때 어디까지 포함하는지 결정하는 속성이 박스 사이징이다.