오늘 오전시간 진행되었던 회고 특강에서는 회고의 중요성을 배웠다.
모든 개발자라면 어떤 방식으로든 회고하고 기록하는 것이 인지상정..!
나는 계획하고 지키고 기록하는 것을 정말 못하는 인간인데..노력해야겠다^^
글구 오늘 처음 회고조랑 모여서 대화했는데, 어떤 방향으로 회고를 해야하는지 아직 구체적으로 결론이 나지 않았다.
개인적으로는 멋사에서 처음에 얘기해준대로 너무 스터디하는 느낌으로 가기보다는(스터디는 어차피 회고조 아닌사람들이랑 많이 하니까!) 같이 수다도 떨고 으쌰으쌰 힘이 나도록 응원해주는 사이가 되었으면 좋겠다!
수업시간에 실습시작하기전에 main 브랜치에서 flex브랜치로 바꿔주고 시작했다.
html이 강사님이랑 달라서 당황했지만 침착하게 복붙...^^
Dom Tree
<ul class="member">
<li><a href="/">홈</a></li>
<li><a href="/">로그인</a></li>
<li><a href="/">회원가입</a></li>
<li><a href="/">사이트맵</a></li>
<li><a href="/">ENGLISH</a></li>
</ul>위의 코드로 dom tree구조를 확인할 수 있다.
가상 클래스
선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 한다.
- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- :hover - 마우스를 롤오버 했을 때
- :active - 마우스를 클릭했을 때
- :focus - 포커스 되었을 때 (input 태그 등)
- :first - 첫번째 요소
- :last - 마지막 요소
- :first-child - 첫번째 자식
- :last-child - 마지막 자식
- :nth-child(2n+1) - 홀수 번째 자식
위는 대표적인 가상 클래스의 예시이며 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 HTML, CSS 및 JavaScript의 코드를 효과적으로 줄일 수 있다.
사용예시
.some-box:hover{ background-color: red; }
input.no-border:focus{ border: none }
.container-box:last-child{ margin-right: 0; }
가상 요소 선택자
가상 요소 선택자는 요소의 지정된 부분에 스타일을 지정하는 데 사용된다.
- Style the first letter, or line, of an element
- Insert content before, or after, the content of an element
::before 요소의 콘텐츠 시작부분에 생성된 콘텐츠를 추가
::after 요소의 콘텐츠 끝부분에 생성된 콘텐츠를 추가
사용예시
.member li::before {
content: ":";
}
선택자 우선순위
CSS에 속성이 중복되어 설정될 수 있는데, 어떤 속성이 우선되어 적용되는지 우선순위를 araboza...
- id > class > tag 순
- 정해진 점수를 합산하여 우선순위를 정한다.
- !important 를 사용하여 가장 우선적으로 적용 시킬 수 있다.
| 선택자 방식 | 적용 예 | 선택자 우선 순위 | 혼용 방식의 점수 산정 | 비고 |
| !important | 속성: 적용값 !important; | 속성 기준 가장 우선 | 속성 기준 가장 우선 | 속성 기준 가장 우선 |
| 인라인 스타일 | style="" | 1 | 요소 기준 가장 우선 | 요소 기준 가장 우선 |
| Id 선택자 | #selector | 2 | 100 | #header > .logo > a { } |
| Class 선택자 | .selector | 3 |
10 | |
| 속성 기반 선택자 | a[href*="#"] | |||
| 가상 클래스 | a:hover | |||
| 가상 요소 | span::after | |||
| 태그 선택자 | a | 4 | 1 | |
| 전체 선택자 | * | 5 | 0 |
같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용된다.
구조선택자
구조에 따라 특정한 위치에 속하는 태그를 선택할 수 있는 태그
:nth-child(n)
형제 사이에서의 순서에 따라 요소를 선택 (순서는 0이 아닌 1부터 시작)
HTML
<body>
<div id ="menu">
<ol>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
</ol>
</div>
</body>CSS
<style>
#menu {width : 200px; height : 200px;}
ol li:nth-child(2n+1) {background-color : red}
ol li:nth-child(2n) {background-color : yellow}
</style>
fontello
보통 fontawesome을 사용하는데 수업 실습에서는 fontello를 사용하였다.
1. 사이트에서 원하는 아이콘을 클릭 후, Download webfont를 클릭하여 다운받는다.
2. 압축해제 후 font와 css를 작업공간에 넣어준다.
3. html태그에 class="icon-아이콘명" 을 입력하여 원하는 아이콘을 삽입한다.
<ul class="member">
<li><a href="/">홈</a></li>
<li><span class="icon-colon"></span><a href="/">로그인</a></li>
<li><span class="icon-colon"></span><a href="/">회원가입</a></li>
<li><span class="icon-colon"></span><a href="/">사이트맵</a></li>
<li><span class="icon-colon"></span><a href="/">english</a></li>
</ul>
4. 또는 fontello.css에서 코드를 확인하고 아래와 같이 css를 적용할 수 있다.
text-transform
대문자 혹은 소문자로 바꾸는 속성 (한글에서는 의미가 없음)
- 기본값 : none
- 상속 : Yes
- none : 입력된 그대로 출력
- capitalize : 단어의 첫번째 글자를 대문자로
- uppercase : 모든 글자를 대문자로
- lowercase : 모든 글자를 소문자로
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.ca {text-transform: capitalize;}
.up {text-transform: uppercase;}
.lo {text-transform: lowercase;}
.va {font-variant: small-caps;}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<p class="ca">Lorem ipsum dolor sit amet.</p>
<p class="up">Lorem ipsum dolor sit amet.</p>
<p class="lo">Lorem ipsum dolor sit amet.</p>
<p class="va">Lorem ipsum dolor sit amet.</p>
</body>
</html>'개발 > Today I Learned' 카테고리의 다른 글
| Sass 개발환경 구성 (0) | 2022.12.21 |
|---|---|
| 멋사 D+7 HTML + CSS (0) | 2022.12.07 |
| 멋사 D+5 Git + HTML + CSS (0) | 2022.12.02 |
| 멋사 D+4 HTML+CSS (1) | 2022.12.02 |
| 멋사 D+3 HTML/CSS + Git (0) | 2022.11.30 |