CSS 기초 & 실습

📌학습 내용

📖 가상선택자

선택한 요소에 특정한 행동과 규칙으로 디자인을 적용하는 개념

💡 행동
link: 방문한 적이 없는 링크에 대해 디자인을 적용
active: 클릭한 상태에 대해 디자인을 적용
hover: 클릭하지 않고 마우스를 올리고만 있을 때 디자인을 적용
input-focus: 포커스 되어 있는 상태에 디자인을 적용

      a:link {
          color:  red;
      } 
      
      a:active {
          color: blue;
      }

      a:hover {
          color: pink;
      }

      input:focus {
          border: solid 10px red;
      }

-결과

💡 규칙

      /*첫 번째*/
      li:first-child{
          color: red;
      }
      /*마지막*/
      li:last-child{
          color: blue;
      }
      /*두 번째*/
      li:nth-child(2) {
          color: gray;
      }

-결과

      /*홀수*/
      li:nth-child(2n + 1)  {
          color: green;
      }

-결과

💡 글자의 앞뒤에 디자인 삽입

      li:before{
          content: "|";
      }
      li:after{
          content: "---";
      }

박용 멘토님: 가상선택자 참고
https://thrillfighter.tistory.com/463

📖 작업 파일 관리와 경로 설정

• 프로젝트 폴더 안에 html 과 img / css / js 폴더를 분리하고 파일들을 관리할 것
• link 경로는 a href="css폴더명/파일명.css"
• html에서 이미지를 불러오는 경로는 img src="이미지폴더명/파일명.png"
• css에서 이미지를 불러오는 경로는 url(../이미지폴더명/파일명.png);

📖 작업물을 서버에 올리는 법

• 실무에서는 카페24, 가비아 등 호스팅업체에서 제공하는 서버에 업로드
• 무료 웹호스팅: 닷홈 http://www.dothome.co.kr
• 무료 FTP: 파일질라 서버의 html 폴더 안으로 업로드

📖 실습(1) - 카카오 친구 리스트 디자인 입히기

<ul class="friends-lists">
		<li class="friends-list">
			<a href="#">
				<img src="https://via.placeholder.com/50" class="friend-thumbnail"> 
				<div>
					<h3 class="friend-name">김민호</h3>
					<span class="friend-intro">Minho Kim</span> 
				</div>

		</li>
		<li class="friends-list">
			<a href="#">
				<img src="https://via.placeholder.com/50" class="friend-thumbnail"> 
				<div>
					<h3 class="friend-name">박지연</h3>
					<span class="friend-intro">다정한 사람</span> 
				</div>

		</li>
		<li class="friends-list">
			<a href="#">
				<img src="https://via.placeholder.com/50" class="friend-thumbnail"> 
				<div>
					<h3 class="friend-name">소연이</h3>
					<span class="friend-intro">24/7</span> 
				</div>

		</li>
	</ul>

          .friends-lists {
              list-style: none;
          }

          .friends-lists .friends-list a {
              color: #000000;
              text-decoration: none;
          }


          .friends-lists .friend-thumbnail {
              border: solid 2px gray;
              border-radius: 20px; /*50%로 입력하면 둥근 원모양*/
          }

          .friends-lists .friend-name {
              font-size: 20px;
              color: #000000;
          }

          .friends-lists .friend-intro {
              font-size: 15px;
              color: #c8c8c8;
          }

강사님 팁: 디자인 적용이 안 될 때
1 브라우저 검사 기능을 활용해 CSS 오류가 있는지 검토할 것
2 html&css 파일 연동이 제대로 되어있는지 확인할 것

📖 실습(2) 네이버 디자인 입히기

-예시

📎HTML

	<ul class="living-lists"> 
		<li class="living-item">
			<a href="#">
				<img src="https://via.placeholder.com/170x114" class="living-thumbnail">
				
				<div class="living-info">
					<span class="type">리빙</span>
					<h3 class="title">30평대 아파트, 따뜻한 느낌의 침실</h3>
					<p class="paragraph">ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ</p>

					<div class="date-wrap">
						<span class="source">유닠</span>
						<span class="date">3개월 전</span>
					</div>
				</div>
		</li>
	</ul>

📎CSS

        .living-lists {
            list-style: none;
        }

        .living-lists .living-item a {
            color: #000000;
            text-decoration: none;
        }

        .living-lists .living-item .living-info .type {
            color: #c08d31;
            font-weight:  700;
            font-size: 12px;
        }

        .living-lists .living-item .living-info .title {
            font-size: 13px;
            color: #000000;
        }

        .living-lists .living-item .living-info .paragraph{
            font-size: 13px;
            color: #404040;
            line-height: 15px /*글자 위아래 간격*/
        }

        .living-lists .living-item .living-info .date-wrap .source,
        .living-lists .living-item .living-info .date-wrap .date{
            font-size:  12px;
            color: #505050;
        }

        .living-lists .living-item .living-info .date-wrap .date{
            color: gray;
        }

        .living-lists .living-item .living-info .date-wrap .date:before{
            content: '- ';
        }

        .living-lists .living-item a:hover .living-info .title{
            text-decoration: underline;
        }

-결과

박용 멘토님: 캐스케이딩 참고
https://engkimbs.tistory.com/913

📌어려운 점

마지막 네이버 작업할 때 아무리 해도 결과로 나타나지 않는 디자인이 있었는데 하나하나 뜯어보니 class를 나타내기 위해 클래스명 앞에 '.'을 칠 때 클래스명 뒤에도 습관처럼 마침표를 붙이고 있었다. 세 개 정도를 그렇게 해뒀길래 찾아냄.. 😷

📌해결방법

강사님께서 코드가 길어지면 오류가 났을 때 찾기가 힘드니 중간중간 오탈자를 신경써서 보라고 하셨는데 좀 더 주의해야 할 것 같다.