01
27
인터넷강의/웹 개발 입문

border-radius와 inherit 그리고 a의 노말라이즈 

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
div {
  width:15%; /* 부모 엘리먼트 너비 기준 */
  height:100px;
  background-color:red;
  display:inline-block;
  /* 모서리 50px를 둥글게 처리 */
  border-radius:50px;
  /* border-radius:50%; */
}

실행 화면

 

<nav>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</nav>
body {
  background-color:black;
}

nav {
  text-align:center;
}

nav > div {
  width:20px;
  height:20px;
  background-color:rgba(255,255,255,0.5);
  display:inline-block;
  border-radius:5px;
  cursor:pointer;
}

nav > div:first-child, nav > div:hover {
  background-color:rgba(255,255,255,1);
}

실행 화면

 

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
div {
  width:200px; /* 부모 엘리먼트 너비 기준 */
  height:200px;
  background-color:gold;
  display:inline-block;
  /* 모서리 50px를 둥글게 처리 */
  border-radius:50%;
}

실행 화면

 

<!-- inherit : 부모를 따라한다. -->

<body>
  <!-- body 의 텍스트 -->
  Hello
  <section>
    <!-- section 의 텍스트 -->
    하하
    <div>
      <!-- div 의 텍스트 -->
      안녕
    </div>
    <div>
      하세요
    </div>
    <div>
      ㅋㅋㅋ
    </div>
  </section>
</body>
body {
  color:red;
}

section {
  /* section의 기본 컬러 속성 : inherit */
  color:blue;
}

div:last-child {
  color:green;
}

실행 화면

 

<!-- inherit : 부모를 따라한다. -->

<body>
  <!-- body 의 텍스트 -->
  Hello
  <section>
    <!-- section 의 텍스트 -->
    하하
    <div>
      <!-- div 의 텍스트 -->
      안녕
    </div>
    <div>
      하세요
    </div>
    <div>
      ㅋㅋㅋ
    </div>
  </section>
</body>
body {
  /* 모든 엘리먼트는 아래 속성의 기본값이 모두 inherit 이다. */
  color:red;
  font-family:"돋움";
  font-weight:bold;
  text-align:center;
  font-size:2rem;
  letter-spacing:10px;
  /* 아래 속성은 상속되지 않는다., 물론 상속되게 할 수 도 있다. */
  border:10px solid green;
}

section {
  /* 이렇게 하면 section은 body의 border 속성을 따라한다. */
  border:inherit;
}

실행 화면

 

안녕하세요.
<br>
<a href="#">안녕하세요.</a>

<section>
  <div>1</div>
  <div>2</div>
</section>
body {
  color:blue;
}

/* 노말라이즈 웹 디자이너가 가장 먼저 해야할 일 */

/* 이 세상의 모든 a 엘리먼트를 평범하게 만든다. */
a {
  color:inherit;
  text-decoration:none;
}

실행 화면

 

<button onclick="자기소개();">경고창</button>
console.clear();

function 자기소개() {
  let msg = "안녕하세요. 저는 홍길동 입니다.\n저의 취미는 바둑입니다.";
  
  alert(msg);
}

//

실행 화면

 

<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div></div>
<div></div>
<div></div>
div {
  width:200px;
  height:200px;
  border:20px solid green;
  padding:20px;
  box-sizing:border-box;
}

div {
  background-color:red;
}
$('div').css('background-color', 'red');

실행 화면

 

 

저작자표시 비영리 변경금지

'인터넷강의 > 웹 개발 입문' 카테고리의 다른 글

body의 노말라이즈와 클래스 선택자 그리고 BEM  (0) 2023.01.28
회색 사이트, 메뉴바 구현 - 1차 메뉴  (0) 2023.01.28
block 요소 정렬  (0) 2023.01.25
nth-child  (0) 2023.01.16
margin, padding과 inline vs inline-block  (0) 2023.01.06
COMMENT
 

티스토리툴바