기록용 TIL...
복습만 해도 하루가 정말 후딱 간다 ㅠㅠ ㅠ !!!
매일 쓸 수도 있고 깃헙으로 옮길수도 공개나 비공개로 전환할 수도 있고?!
좋은 TIL에 대한 글을 읽었지만 코드를 분석하는 것이 아니라 암기와 적용 수준이라 그냥 빽빽이처럼 쓰기로함^.^
아직은 공부법을 찾아가는 중이라 일단 벨로그에 남겨봄.. 모르면 빠르게 검색이라도 하자 !!!!!
html 클론 코딩으로 홈페이지 만들기
[ html ]
<span>태그
<div>와<p>와 함께 웹페이지 일부의 스타일을 바꾸기 위해 사용
span 태그 내부에 객체가 들어가면 그 객체의 크기만큼 공간이 할당됨
span 태그로 요소를 감싸면 CSS나 javascript로 그 부분을 변형시키는 것이 가능해짐
<ul>태그와 <ol>태그
<ol>태그는 oldered list = 순서가 있는 목록
<ul>태그는 unordered list = 순서가 필요 없는 목록
+) <dl>태그는 definition list = 사전처럼 용어를 설명하는 목록
태그 안에 각 항목들을 나열할 때는 <li> 태그를 사용
ex)
<ol>
<li>하하
<li>히히
<li>호호
</ol> 출력 화면은
1. 하하
2. 히히
3. 호호
+) 여기 li태그 안에 꼭 텍스트가 들어가야하는 것이 아님!
이미지도 들어갈 수 있음 <li><img src="./img/thumb-1.png"><li> 이런 식으로
<article>태그
독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역으로 사용
ex) 게시판 글, 뉴스 기사, 블로그 글, 댓글 등
<form>태그
<form>
<input
type="email"
name="email"
placeholder="이메일을 입력해 주세요"
required/>
</form>폼 입력 받을 때 사용하는 태그
[ CSS ]
Position
설명링크
브라우저 전체 화면(viewport)을 기준으로 요소가 배치됨
position 속성은 html 요소가 어떻게 배치되는가를 결정하는데, 이 속성의 값을 fixed로 지정해주면 고정 배치가 적용됨
.alpha {
position: fixed;
}- static
기본값. 자연스러운 흐름에서의 '원래 위치'에 위치하게 함 - fixed
화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않도록 하는 것
부모 요소나 자신을 기준으로 하는 것이 아니라 'viewport'를 기준으로 배치함
아래 예시는 '하단에서 8px, 우측으로부터 16px' 떨어지도록 한 것
div:nth-of-type(2) {
position: fixed;
bottom: 8px;
right: 16px; }- absolute
해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾음
DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정
대개 부모 요소 기준을 따르도록 할 때 사용하마 - relative
원래 위치로부터 지정한 값만큼 상대적으로 이동시켜 배치
z-index
설명링크
겹친 요소의 순서 지정
(포토샵의 '레이어'와 비슷하다고 이해하면 됨)
맨 위로 올라오게 하려면 1 사용
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; padding
구역 안쪽 여백 설정
위를 기준으로 시계 방향으로 생각하면 됨
padding: 위 오른쪽 아래 왼쪽 ;
/* 네 면 모두 적용 */
padding: 1em;
/* 세로방향 | 가로방향 */
padding: 5% 10%;
/* 위 | 가로방향 | 아래 */
padding: 1em 2em 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 5px 1em 0 2em;
/* 전역 값 */
padding: inherit;
padding: initial;
padding: unset;padding은 요소 '안쪽' 빈 공간인 반면
margin은 요소 주위의 여백을 설정
display: inline-block
inline 요소는 x축 정렬 형태로 출력(줄바꿈 현상 x 한 줄에 출력됨), 공간을 만들 수 있고 상하 배치 작업 가능
block 요소는 y축 정렬 형태로 출력(줄바꿈 현상 o), 공간을 만들 수 없고 상하 배치 작업 불가능
inline-block은 일종의 하이브리드
기본적으로 inlie 요소처럼 줄바꿈 없이 출력되지만,
block 요소처럼 width와 height 속성 지정, margin과 padding 속성으로 상하 간격 지정이 가능함
none;을 입력하면 요소가 완전히 사라진 것처럼 보이게 만듦
css 요소의 우선순위
1) 순서
나중에 적용한 속성값의 우선순위가 더 높음
/* <p>Hello World</p> */
p { color: red; }
p { color: blue; ]
2) 디테일
더 구체적으로 작성된 선택자의 우선순위가 더 높음
header p {color: red; }
p { color: blue; }
3) 선택자
style > id > class > type 순으로 우선순위가 높음
<h3 style="color: pink" id="color" class="color"> color </h3>
#color { color: blue; }
.color { color: red; }
h3 {color: green; }
white-space
설명링크
CSS white-space 속성은 요소가 공백 문자를 처리하는 법
-
normal
연속 공백을 하나로 합치고, 개행 문자( \ r \ n)도 다른 공백 문자와 동일하게 봄
자동줄바꿈됨 -
nowrap
연속 공백을 하나로 합침. 줄 바꿈은
요소에서만 일어남 -
pre
연속 공백 유지. 줄 바꿈은 개행 문자와
요소에서만 일어남 -
pre-wrap
연속 공백 유지. 줄 바꿈은 개행 문자와
요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿈 -
pre-line
연속 공백을 하나로 합침. 줄바꿈은 개행 문자와
요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿈
line-height
행간 조정
정확히 말하면 박스의 높이를 만들어주는 것
max-width
width의 한계를 설정해줌
width의 크기는 max-width를 넘을 수 없음
:focus
추가링크
CSS:focus 는 양식의 입력 칸 등(ex: 이메일 등) 포커스 받은 요소를 나타냄
사용자가 요소를 클릭 또는 탭하거나, 키보드 탭 키로 '선택'했을 때 효과가 발동함
/* Selects any <input> when focused */
input:focus {
color: red;
}실습 강의
[JavaScript]
forEach메서드
