html tag
<ol>
ordered list 순서가 있는
<li></li>
</ol>
<ul>
unordered list 순서가 없는
<li></li>
</ul>
정의태그
<dl>
definition list
<dt></dt>
definition turm
<dd></dd>
definition description
</dl>
<em>이태릭체강조</em>
<strong>굴은글씨체</strong>
<code>코드보여줄때 간격이 같은 글씨체</code>
<pre>
여러줄에 걸쳐서 코드보여줄때
<code>& l t ; HTML & g t ;</code>
<code>& l t ; BODY & g t ;</code>
<code>& n b s p ; & n b s p ; & n b s p ; & n b s p ; 공백나타내는</code>
</pre>
<a href="https://www.naver.com" >네이버</a>
css font color keywords
https://developer.mozilla.org/ko/docs/Web/CSS/color_value
로고에
!+tab
link+tab
css reset
css normalize 일반화
https://necolas.github.io/normalize.css/
korea lan
live server
html snippet
prettier
ctrl+shift+p
preferences
formatonsave
editor:format on save체크
크롬확장
web developer
whatfont
h1요소 로고에 position: absolute;값을 주려면
어디를 기준으로 absolute가 될 것인지
position: absolute;값을 가지는 자식속성이 기준으로 하는 부모영역이
position: static 값이 아닌 가장 가까운 부모영역 이어서
container영역에다 position: relative; 값을 준다
position: relative; 값은 normal flow 값에서 벋어나는 것이 아니기때문에
위치가 변화하지 않는다.
.logo{
position:absolute;
}영역은 normal flow에서 벗어나기때문에
이 전체 높이가
자식속성인 position:absolute; 값을 준 logo의 크기를 잃어버리게 된다.
h1의 유저에이전트속성이 마진값이 적용되어 있기 때문에 약간 아래로 내려온듯한 모습으로 보인다.
.nav{
text-align:right;
}
.list-item{
display:inline-block;
}
ul요소인 경우에도 margin값이 적용되어 있기 때문에
h1요소와 ul요소에 margin값을 없애야 된다.
header영역에 height값을 임의로 줘서
자식요소의 크기를 인지하지 못하는 것을
logo영역에
container영역에다 position: relative; 값을 준 상태에서
logo요소에 position:absolute; 값을 주었는데
container에 padding값으로 좌우에 20px씩 적용하도록 설정했는데 but
position:absolute;가 자식요소로 들어가게 되면
container의 padding값을 못가져오므로
padding left에 inherit 이라는 값을 주어서
부모요소의 padding값이 제대로 적용되도록
==========================================
fonts.google.com
roboto
select this font
family selected
customize
embed
standard
link~~복사
html에 붙여넣기(link)
==========================================
a요소 밑줄 초기화
text-decoration:none; 초기화
===========================================
font-size
padding
그 전에 li요소에 우리가 넣지 않은 여백이 있는데 없애기
li요소의 부모 ul요소인 list클래스에
font-size:0;폰트 사이즈를 아애 없애버리고
list-item요소에 font-size를 1.3rem별도로 글씨 크기를 부여
========================================
.list-item a{====.list-item > a{
color:white;
패딩속성을 적용하기에 앞서서
display:block;
padding:10px;패딩을 넉넉하게 주는 이유는 글씨만 선택하는 건 어려우니까
========================================
.list-item > a:hover{
color:지정한 값
========================================
.list{
text-transform:uppercase;대문자