냐울당 햄버거 메뉴

목차

    반응형

    안녕하세요. 개자이너 씸플레이입니다.

     

    랩은 음식을 먹고 위에 씌우는 그 랩과 같은 단어입니다.

    래핑 역시 같은 의미로 음식을 랩으로 포장해준다는 뜻이죠. 코딩에서의 래핑도 같은 의미입니다. 

     

    그러니 래핑이라고 하면 어떤 코드를 포장해준다고 생각하시면 됩니다.

    vs code에서 단축키를 이용해 래핑을 해보겠습니다.


    1. 모든 명령어 보기

    랩핑할 코드 블럭지정

    래핑 할 코드를 블럭지정 해줍니다. 그냥 주르륵 드래그로 잡아주시면 됩니다.

     

    모든 명령어 보기 창

    Ctrl  + Shift + P 단축키를 누르면 모든 명령어 보기라는 창이 뜹니다. 여기서 검색해주시면 됩니다.

    최근에 사용한 적이 있어서 이미 뜨기는 하는데 같이 검색해보겠습니다.


    2. wrap

    래핑 명령어

    wrap이라고 검색하면 Emmet: 약어로 래핑이라는 명령어가 나올 겁니다. 최근에 사용한 항목이라 맨 위에 뜨는데 처음 검색하셨다면 가장 아래에 있을 겁니다. 저 래핑 명령어를 선택해줍니다.

     

    wrap 창

    이런 검색창 같은 게 뜬다면 여기에 원하는 태그의 이름을 적어주시면 됩니다. 가장 많이 사용하는 <div>태그를 넣어보겠습니다.


    3. 래핑

    div를 입력했을 때

    꺽쇠를 빼고 태그의 이름만 넣어주시면 됩니다. div라고 입력하면 코드가 변하는 것을 알 수 있습니다. 블럭지정했던 곳을 <div>태그로 감싸준 것을 확인할 수 있죠. 명령어를 이용해 간단하게 래핑을 할 수 있습니다.

     

    래핑 적용

    엔터를 눌러서 창을 나오면 래핑이 적용됩니다. <div>태그로 감싸진 것이 보이시죠?

     

    320x100

    4. 클래스 넣기

    래핑 클래스 넣기

    클래스를 호출할때 .(마침표)를 쓰는 것 알고 계실 겁니다. 응용하여 태그명.클래스명 형식으로 입력하면 클래스도 넣어줄 수 있습니다. <div>태그에 nav라는 클래스명을 넣고 싶다면 div.nav 라고 입력하면 된다는 것이죠. 

     

    참고로 id는 #을 이용하면 넣을 수 있습니다.

     

    [같이 보면 좋은 글]

    [coding/etc] - [vs code] 비주얼 스튜디오 코드 단축키를 검색해보자

    [coding/etc] - [vs code] 비주얼 스튜디오 코드 한글 패치 하기

    [coding/etc] - [vs code] 비주얼 스튜디오 코드 설치하기 (무료 에디터 프로그램)


    그럼 이만.

    총총.

    반응형
    댓글
    위쪽 화살표
    도움이 되었다면 공감(하트)과 댓글을 부탁드려요.
    로딩바