티스토리 뷰

CSS

22-12-13 CSS시작 - VS코드 설치(개발환경셋팅), HTML태그

JadeStone 2022. 12. 13. 19:13

교안파일

1강_HTML기초.pdf
1.07MB

 

#개발환경 구축

 

*VS 코드 - Visual Studio Code 설치하기.

 

-워크스페이스 설정하기

우리의 수업 중 모든 자료들을 모아두었던 course 폴더에 

CSS폴더를 만든다.

vs코드에서 css폴더내부에 들어가서 그곳에다가 01html 폴더를 만들었다. 

이렇게 CSS 폴더를 작업 폴더로 구축했다.

 

 

 css 폴더 내에 

.vscode 폴더를 만든다.

.vscode 폴더내에  settings.json 파일을 만든다.

 

그리고 아래와 같은 코드를 써주어서 

liveServer 의 포트를 지정해주고 (라이브 서버를 연결해줌)

, 주석의 색을 내가 원하는 색으로 지정해주었다.

{
    "liveServer.settings.port": 5501,
    "editor.tokenColorCustomizations":{
        "comments": "#ff0000" //원하는 색상
    }
}

 

 

 

-실행하고 나서 아래와 같이 들어가면 옵션과 테마설정 할 수 있음.

 

 

- 라이브 서버 설치

 

 

<HTML 태그 관련 코드 내용>

-단축키 및 기초 세팅 내용

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    hello..라이브서버 플러그인<br>
    정상동작이 안되면 .vscode 폴더생성<br>
    해당 폴더안에 settings.json 파일생성<br>
    브라우저변경 -> settings들어가서 browers검색<br>



    <!--
        단축키:
        코드이동: alt + 방향키
        코드정렬: alt + shift + f
        alt + cursor 
        태그명 + tab버튼
        주석단축키: ctrl + / , alt + shift + a
        행 삭제 : ctrl + shift + k
    -->

    <a href="//www.naver.com">네이버</a>

    <h3>
        제목태그
    </h3>

    <p>글자태그</p>
    <samll>글자태그</samll>
    <strong>글자태그</strong>
    <i>글자태그</i>
    <del>글자태그</del>
    <b>글자태그</b>

    <hr/>

    <ol>
        <li>목록</li>
        <li>목록</li>
        <li>목록</li>
    </ol>

    <ul>
        <li>목록</li>
        <li>목록</li>
        <li>목록</li>
    </ul>


</body>

</html>

 

-block_inline 파일 ->  블록 태그 , 인라인 태그 비교

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 디자인을 잘 하는 방법 1 - 개발자 도구를 이용 -->

    <!--
         블럭태그
         전체영역을 공간으로 가집니다
         블럭태그의 자식으로 블럭, 인라인 태그 모두 들어 갈 수 있습니다.
    -->

    <div>블럭</div>
    <div>블럭</div>
    <div>블럭</div>
    <p>블럭</p>
    <h3>블럭</h3>
    <ul>
        <li>블럭</li>
        <li>블럭</li>
    </ul>

    <table>
        <tr>
            <td>블럭</td>
        </tr>
    </table>

    <div>
        <div>
            <div>블럭</div>
        </div>
    </div>

    <!--
        인라인 
        인라인 요소는 태그자체의 크기를 가집니다.
        인라인요소 안에는 인라인만 들어갑니다.
    -->

    <a href="#">인라인</a>
    <span>인라인</span>
    <i>인라인</i>
    <b>인라인</b>
    <strong>인라인</strong>
    <small>인라인</small>

    
    

</body>
</html>

 

블록태그 VS 인라인 태그

*시멘틱 태그

 

# VS 코드 내에서 깃 쓰는 법

 

-깃 명령어

아래 내용중 

git remote add origin (깃허브레파지토리 주소) 

이렇게 써줘야함.

 

저작자표시

'CSS' 카테고리의 다른 글

22-12-26 반응형 디자인, 부트스트랩  (0) 2022.12.26
22-12-23 CSS - 디자인 실습  (0) 2022.12.23
22-12-22 css - 박스레이아웃(position)  (1) 2022.12.22
22-12-21 css기초- 패딩과마진 , 박스사이징,박스레이아웃, float  (0) 2022.12.21
22-12-20 css기초 - 단위, 선택자, 폰트, border속성, 텍스트 속성, 텍스트 정렬, display속성, background속성  (0) 2022.12.20
댓글