[CSS] 2022-03-22 2일차 개발일지 (1)

17622 단어 CSS웹기초대구AI스쿨CSS

1.학습한 내용

css기본문법

<body>
<ol>
<font color="red">
	<li>item</li>
</font>
<font color="yellow">
	<li>item</li>
</font>
<li>item</li>
</ol>

font 태그는 디자인적 요소 표현, 정보X

웹 사이트 레이아웃을 표로 만들기 시작하던 시기에 표가 정보인지 디자인 레이아웃인지 알기 어려웠다.
이로인해 정보를 청각화하여 들어야 하는 시각장애인 입장에서 심각한 문제로 적용되었고, 디자인으로 인하여 정보의 역할이 줄어들자 HTML이 정보에 집중하여 디자인과 구분하기 위한 css 기술의 탄생

  • Style 태그
    css문법에 따라 해석하라고 명령하는 코드

선언 - 효과를 풍부하게 해주는 역할

색상 color: (색상명);
밑줄 text-decoration:underline;

<head>
	<style>
    li{
    	color: red;
    }
    </style>
</head>
<body>
	<ol>
    	<li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>
</body>

(+) li
: 선택자 (=selector)
주어의 역할, 뒤에 있는 문법을 누구에게 줄지 선택

중요도 1. 선택자 2. 선언 

</head>
<body>
    <h1>CSS Syntax</h1>
	<ol>
    	<li>item</li>
        <li>item</li>
    </ol>
</body>

Q. h1과 첫 번째 li를 같은 색으로 변경하려면?
같은 그룹으로 만들고 그룹에 효과를 준다.
그룹 = class

</head>
<body>
    <h1 class="em">CSS Syntax</h1>
	<ol>
    	<li class="em">item</li>
        <li>item</li>
    </ol>
</body>

강조한다 = em

주의 :
em은 이름으로 아무거나 입력 가능, class는 문법으로 아무거나 입력 불가

Q. class가 em이면 폰트 컬러는 파랑으로 변경한다.

<style>
	li{
    	color: red;
        text-decoration: underline;
    }
    	.em{
			color: blue;        
        }
</style>
.
.
.
</head>
<body>
    <h1 class="em">CSS Syntax</h1>
	<ol>
    	<li class="em">item</li>
        <li>item</li>
    </ol>
</body>


class가 em인 것으로 em 앞에 .을 붙인 '.em' 으로 선언하여야 색상이 변경된다.

우선순위 규칙
li - 웹 페이지 내 모든 li인 태그
.em - 웹 페이지 내 class가 em인 태그

.em 구체적이고 li가 포괄적이다.
css는 구체적일수록 우선 순위가 높다.

포괄적인 걸로 전체 디자인을 하고 구체적인 걸로 부분 수정하는게 더 효과적이기 때문

Q. item 하나만 색상을 초록색으로 변경?
id (식별자) 속성 사용

<style>
	li{
    	color: red;
        text-decoration: underline;
    }
    	.em{
			color: blue;        
        }
        #id{
       		color: green;
       }
       
</style>
.
.
.
</head>
<body>
    <h1 class="em">CSS Syntax</h1>
	<ol>
    	<li class="em" id="vip">item</li>
        <li>item</li>
    </ol>
</body>


vip라는 id는 한번만 사용 (여러번 사용 불가)

class (그룹, 예시-반), id(식별자, 예시-학번)
id가 훨씬 더 구체적

구체적 > 포괄적 순: id > class > li(태그 선택자)

2.어려웠던 점

3.해결방법

4.학습 소감

1일차 학습에서 밑줄 표시를 할 경우 u(under line)태그를 사용했다.
css를 활용하는 순간 같은 활동도 태그가 달라지는 점을 알 수 있었다.

백준 2644번: 촌수계산
UE4 Character Input mapping

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage