ui구현 2023.03.13

김영식 선생님

이메일 : kys7578@naver.com

 

수업자료 : http://naver.me/Fcg8W5KE 

UI구현

 

https://code.visualstudio.com/ 다운

 

c드라이브 workspace-html 폴더에서 저장

 

비주얼 스튜디오

vsCode 확장프로그램 설치 목록.txt

0.00MB

live server 확장프로그램 추가 설치함

설정-> live server config -> custom browser -> 크롬

파일>자동저장 설정

 

!+tab키 : html 기본구조 자동완성

한줄 복사 : alt+shift+화살표 위,아래

ctrl+/ : 한줄주석 : 프로그래밍과 연관이 없고, 메모 용도로 많이 사용

live server 실행 단축키 : alt+l -> alt+o

브라우저 개발자모드 f12번 : 프론트엔드 개발시 많이 사용한다. 미리보기용.

 

127.0.0.1 or localhost : 컴퓨터 자기자신의 주소를 뜻한다.

<열리는태그 속성명1="속성값" 속성명2="속성값"></닫히는태그>

 

이스케이프 문자 안외워도됨....

 

meta태그 : 데이터를 표현하는 속성

body태그: 실제로 보여질 화면을 작성  

 

 <a href="https://www.naver.com" target="_blank">네이버로 이동</a>

    <!-- a라고 하는 태그에 href와 target 속성을 설정해 준 상태이다. -->

 a태그 : 특정 URL로 이동을 해주는 태그

        href속성 : 이동할 url을 명시

        target속성 : 이동할 때 보여줄 페이지 설정

h1~h6태그 : 제목을 표현하기 위해 사용하는 태그

 HTML에서는 줄바꿈이나 공백을 나타낼때 정해진 명령어를 사용해야만 한다.

         줄바꿈 : <br>

         공백을 나타낼때(이스케이프문자): &nbsp;

HTML에서 특수문자 표현<br>

        공백 : &amp;nbsp; <br>

        &lt : <~보다 작음 <br>

        &gt : > ~보다 크다. <br>

        &amp : & <br>

        &quot : " 따옴표 <br>

단락을 구분할때 사용하는 p태그

 

태그안에 태그를 넣는것도 가능하다.

 

ul,li 태그 : 순서가 없는 목록 나타내기

ol,li 태그 : 순서 있는 목록 나타내기