웹3 - 2강 (5/13)

Gmarket 3차메뉴 구성 - 2

[코드 잘못 썼을 경우]

ctrl F 누르고 잘못된 곳 찾아서 바꾸기     ***코드 잘 확인하고 바꾸기***

 

[span 특성]

다양한 용도를 가지고 있다! 응용하기
줄바꿈 방지, 강조, 불필요한 속성의 상속을 막아줌 (cursor같은 것), 각각의 텍스트에 속성을 줄 때

 

 

[css 라이브러리]

자주 사용하는 css 설정을 라이브러리로 미리 설정해 둔다.

라이브러리에 있는 css 속성이 필요할 경우 html에 적용시켜준다. (선택자인 .만 빼서 붙여넣어주면 된다)

 

**주의사항 : html에 라이브러리 파일 연결 시 다른 css파일 최상단으로 넣어줘야 함

  <link rel="stylesheet" href="style/la.css">

  <link rel="stylesheet" href="style/style.css">

  <link rel="stylesheet" href="style/gm3.css">

 

 

[cusor설정]

 <li>

              <span>패션의류.잡화.뷰티</span>

              <!-- <div class="g-market-3_nav">3차메뉴2</div> -->

            </li>

            <li><span>유아동</span></li>

            <li><span>식품.생필품</span></li>

            <li><span>홈데코.문구.취미.반려</span></li>

            <li><span>컴퓨터.디지털.가전</span></li>

            <li><span>스포츠.건강.렌탈</span></li>

            <li><span>자동차.공구</span></li>

            <li><span>여행.도서.e쿠폰</span></li>

a태그에서 span으로 바꾸는 이유: <!-- a태그에서 바꿔줌으로서 상속을 막아준다 (cusor) -->

html

.g-marget-2__nav > ul > li > span{

  /* text 속성은 상속되기 때문에 span에 직접 입력 */

  line-height: 43px;

  cursor: pointer;

  font-size: 15px; color: #fff;

}

css

초록색 바탕: li

텍스트: span

 

---

Java Script

[console 용도]

코드펜 : 이동

console용도

1. 자바스크립트에서 문자는 ""안에 작성해야한다.
2. 코드펜은 바로바로 정리하는 능력이 없기 때문에 자바스크립트 최상단에 콘솔창을 깨끗하게 사용하겠다는 console.clear(); 코드를 반드시 작성 후 사용해야한다.(가장 상단에 적어야 한다. - 아래로 쭉 실행 후 다시 돌아오기 때문)
3. console창에 자바스크립트 데이터를 출력하려면 console.log();라는 코드가 필요하다. 소괄호 안에 출력할 데이터 입력 (css의 border 역할이라고 생각하자)

 

 

[문자와 숫자 데이터]

코드펜: 이동

문자와 숫자 데이터

1. js에서 숫자는 ""없이 작성한다.
2. 숫자와 문자를 더하면 숫자가 문자화 되어서 최종적인 데이터는 문자데이터로 출력된다.