thal11 님의 블로그

https://kimyws.tistory.com/74 하이퍼 텍" data-og-host="kimyws.tistory.com" data-og-source-url="https://kimyws.tistory.com/74" data-og-url="https://kimyws.tistory.com/74" data-og-image="https://scrap.kakaocdn.net/dn/b1iX6G/hyWztd6IAG/nqrwtl3C6ogfzm9x2Ntf0K/img.jpg?width=700&height=300&face=0_0_700_300,https://scrap.kakaocdn.net/dn/rcFeT/hyWzuREx0H/kdc7tssO48SdDFegjbGmUk/img.jpg?width=700&height=300&f..

*visual studio code설치 + 파일열기+ 파일생성 > 파일명 "a.html"+ !+Enter: html 기본값 자동생성   ※ 단축키- Tab: 들여쓰기- Shift+Tab: 들여쓰기 취소- Alt+Shift+방향키: 복제- Ctrl+Enter: 다음 줄 생성  ㄴ 커서가 어디에 있든 다음 줄을 생성한다.- Ctrl+Shift+L: 동일 구역 한 번에 선택  ※ HTML- Hyper Text Markup Language- 코드를 해석해 브라우저 내에 보여주는 것.a ※ 렌더링- 코드를 웹브라우저를 통해 해석, 표현되는 과정- VScode, Brackets ... ※ 실제 구현되는 부분 ※ 태그- 정보를 정의하는 형태ㄴ 내용(엘리먼트) ※ 단일태그- 엘리먼트를 감쌀 필요가 없다.- 끝을 구분하..

- html도 속성과 속성값이 있다.- class: 속성- "div-1": 속성값  + 클래스 선택자https://codepen.io/EONJENOG/pen/KKjVPZz 클래스 선택자...codepen.io- 젠코딩: div{div0$}*6  + 클래스 선택자 그룹화https://codepen.io/EONJENOG/pen/xxoZPxJ 클래스 선택자 그룹화...codepen.io- 젠코딩: div.div-${div0$}*6- "." >> class "div-$">> class 이름 - chrome 기본 폰트사이즈 16 - 컴포넌트, 라이브러리  ㄴ css에 미리 스타일값을 저장한 것  + css 힘https://codepen.io/EONJENOG/pen/eYwJevM CSS 힘...codepen.io-..

Block과 inline 활용 구조 구현 https://codepen.io/EONJENOG/pen/WNqQVLW Block과 Inline 활용해서 구조 구현해보기...codepen.io너비속성과 높이속성 https://codepen.io/EONJENOG/pen/KKjdOLP 너비속성(width) 높이속성(height)...codepen.ioInline-block https://codepen.io/EONJENOG/pen/xxoZKVL Inline-block...codepen.iohttps://codepen.io/EONJENOG/pen/JjQGPRO 상위태그와 하위태그를 부르는 명칭...codepen.iohttps://codepen.io/EONJENOG/pen/MWMKgvj css 선택자가 필요한 이유.....

🎁숙제- 53p - 54p(인라인 요소) 꼼꼼히 읽어보고 교재에 있는 예제 구현 해보기- 55p - 56p(블록 요소) 꼼꼼히 읽어보고 교재에 있는 예제 구현 해보기 [교재 중요 포인트]- html요소는 크게 인라인 요소와 블록 요소 두가지 유형으로 나눌 수 있다.- 인라인 요소는 텍스트처럼 내용을 수평으로 표시- 인라인 요소는 자신이 필요한 만큼만 크기를 계산 [div태그 용도]- html에서 가장 기본적인 태그- nav태그나 section태그는 각각 역할이 있지만 div는 의미없는 공간에 사용할 수 있는 태그.- 주로 역할이 없는 공간에 박스로 사용된다. [태그를 세포처럼 생각하자]- 사람이 태어날 때 세포가 정해지는 것 처럼 태그도 각각 역할에 맞게 정해진 세포(요소)를 가지고 태어난다.예시) 한..

[복습]*html 역할- 공간만 제공. 눈에 보이지 않는 구조. 뼈대- 사이트 간에 이동 (로그인)*css- 벽*java- 사용자랑 상호작용*태그- 브라우저가 알아들을 수 있도록 해줌 ??? css 제일 마지막 명령만 처리 ???  [html, css가 존재하는 이유]- 명령 프롬프트로 인터넷을 사용했을 때와 다르게 만들어진 디자인을 브라우저에 띄워줘야 하기 때문에 HTML, CSS가 존재한다고 생각하면 편하다.  [화면 크기만큼 크기를 가지는 태그가 필요한 이유]- 아무리 고정형 사이트라 해도 양 옆 여백은 유연하게 줄어야 하기 때문이다.- 반응형 사이트에서는 사용자 화면 해상도부터 시작해야 되기 때문에 존재한다.예시) 수업에 띄워준 니콘 사이트 배너영상처럼 화면너비와 높이대로 반응하는 영상이 디자인에..

+ 주석 사용해보기https://codepen.io/EONJENOG/pen/rNEVONQ 주석 사용해보기...codepen.io [주석 단축키] ctrl +/ 브라우저- 크롬, 엣지, 사파리, 파이어폭스, 삼성인터넷 [태그 정의]안녕하세요: 여는태그: 닫는태그엘리먼트: 여는 태그와 닫는태그 사이에 있는 요소ㄴ여는태그+닫는태그+요소까지 합쳐서 엘리먼트라고 부르기도 한다. [선택자, 속성, 속성값]속성=대분류속성값 = 소분류예시)속성_의류상의하의외투 속성_과일딸기수박바나나 속성_배경색, 글자색 등..빨간색노란색파란색 css 작성방법선택자 { 속성: 속성값;}  [포토샵] 비트맵 기반 프로그램- 포토샵 기본단위는 px이다.- 비트맵 이미지는 px기반이다.- 비트맵 이미지는 사이즈를 조정하면 해상도가 떨어진다...

[화면 반으로 가르기]Window + 좌우 방향키 [화면 캡쳐]Window + Shift + Sㄴ Window + Shift + S 눌러서 화면 캡쳐 후 블로그에 Ctrl + V로 붙여넣기하면 이미지를 바로 삽입할 수 있다 [유용한 단축키]Ctrl + V: 붙여넣기Ctrl + T: 새 탭 열기Ctrl + W: 탭 닫기Shift: 텍스트 선택Home: 커서를 문장 가장 앞으로 이동End: 커서를 문장 가장 뒤로 이동Ctrl: 띄어쓰기를 기준으로 이동Ctrl + Home: 문단 가장 앞으로 이동 (최상단)Ctrl + End: 문단 가장 뒤로 이동 (최하단) [html에서 자동완성하기]Emmet 코드 자동완성{} 텍스트 자동완성* 여러개 자동완성 {???}*100Ctrl+ACtrl+XTab [Codepen 초..