티스토리

my opinion

검색하기

블로그 홈

my opinion

fluanceifi.tistory.com/m

노력은 성공의 첫걸음 💪

구독자: 0

방명록 방문하기

주요 글 목록

will-change, Focus-inside, transition 📌 Will-change 기본적으로 브라우저에게 "뭔가 바뀔 것 이다" 말해준다. 브라우저는 애니메이션을 더 나아지게 한다. (브라우저에게 렌더링 힌트를 준다.) Element에 실행되길 기대하는 변화를 명시함. Will-change는 그래픽카드를 이용해서 애니메이션을 가속화한다 📌 Focus-inside 내부적으로 focus된 element가 있는지 알 수 있도록 해준다. Ex) rely:focus-within reply 내부에 어떤 element가 focus되어 있다면 이라는 뜻 .reply:focus-within .reply__column:first-child { display: none; } 설명: reply 안에 reply__column:first-child 가 있다면 display는 none.. 공감수 0 댓글수 0 2022. 9. 29.
컴퓨터가 코드를 읽는 순서를 이해하고 적용해보기 🎁 코드는 항상 위에서 아래로 읽는다 그렇기 때문에 아래에 있는 코드가 1순위로 적용된다. (읽기는 위에서 아래 / 적용은 아래에서 위) Position fixed를 한 코드와 position:relative를 주지 않고 absolute를 준 코드가 있으면 적용 순서는 아래에서 위로 적용되는 것이다. Absolute를 이용하여 모든 화면을 덮는 div를 만든다고 치자 그렇다면 div가 맨 아래에 위치해야 모든 화면을 덮을 수 있다. 코드를 작성할 땐 항상 읽는 순서를 생각하여 적용되는 순서를 계산해야 된다. 🎁 적용하기! 화면을 가렸다가 나타나는 애니메이션을 만들어보자! 1. 먼저 화면을 가리는 div속성값을 주자 #splash-screen { background-color: var(--yellow); .. 공감수 1 댓글수 0 2022. 9. 27.
Order, flex-direciton, > 🎈 Order 예시로 코드를 적어보자. .imbest { order: 0 } .imbest_info { order:1 } 각 태그에 숫자를 부여 한 후 숫자에 맞게 순서를 조정한다. Order는 flex children에게 만 적용된다. 🎈 flex-direciton: row-reverse flex의 children끼리 순서를 바꾼다. 더 알아보기 🎈 > ex) .reply__column:last-child > i { ~ property ~ } 여기서 > 는 direct(직접적인)로 children을 선택하는 방법이다. + button을 만들 때 absolute를 사용한 이유는 input 안에 button을 넣기 위해서이다. 공감수 0 댓글수 0 2022. 9. 27.
소문자를 대문자로, 이전페이지, z-index, border-radious 😑 Conent를 적을 때도 소문자로 적는 이유 대문자는 디자인적 요소이기 때문에 css에서 대문자로 변경 가능하기 때문이다. ( HTML : 소문자 , CSS: 대문자변경 ) text-transform: uppercase; 소문자를 대문자로 변경해주는 attribute 이다. 😑 이전페이지로! 모든페이지에서 뒤로가기 버튼을 눌렀을 때 이전페이지로 연결하게 할 때 Href=”javascript:history.back()” 😑 z-index 기본적으로 div의 위치가 맨 앞에서부터 몇번째인지 나타내는 것 즉 layer의 순서가 몇번째 인지 나타내는 것이다. 기본값은 0 1, 2, 3, 4 숫자를 줄수록 몇번 째인지 정하는 것이다. + absolute position(절대적인 위치) or fixed posi.. 공감수 0 댓글수 0 2022. 9. 26.
Position: fiexd, border box의 padding 🔨 Position: fiexd Position: fiexd로 레이아웃을 고정시킨 다음 Bottom:0; 으로 맨 아래로 내린다 맨 오른쪽 아이콘이 사라졌는데 마법의 한줄 box-sizing: border-box; 로 고정시킬 수 있다. Position fixed는 레이아웃을 기존 틀에 벗어나 완전히 고정시키는 효과가 있다 🔨 css: border box의 padding 200px 박스를 만들고 padding-left:50px; 를 준다고 하면 왼쪽에 50px크기의 box가 plus(+)된다. 이유: css에게 200px 박스를 원했으니 padding과 상관없이 200px를 유지하려는 것 하지만 전에 강의 내용처럼 .nav에 box-sizing: border-box; 를 주면 padding을 줘도 신경쓰.. 공감수 1 댓글수 1 2022. 9. 22.
navigation bar, vsc단축키(shortcut) 🎨 Navigation bar 작업 Navigation는 Nav 태그로 작업한다. 🎨 VSC단축키(shortcut) 와 몇가지 꿀팁 nav>ul>li*4>a를 입력 시 한번에 완성된다. 그 후 Tab 버튼 한 번으로 간편하게 다음 내용을 작성 할 수 있다. 속성과 class이름은 같아도 상관없다. 메인styles.css에 다른 요소의 css를 import할 때는 순서를 지키는 것이 정말 중요하다. Reset.css에서 color는 inherit(상속)으로 text꾸미기는 none;로 설정하여 기본설정을 비워 둔다. 공감수 1 댓글수 1 2022. 9. 22.
@media 🧡 @media 관련하여 예시의 코드를 작성해보자. @media screen and (min-width: 600px) and (max-width: 800px) screen의 최소사이즈가 600px과 최대사이즈 800px의 사이라는 뜻이다. 해석하면 최소사이즈와 최대 사이즈 사이에서 작동하게 하는 코드이다. 이렇게 코드를 짜면 코드 한 줄로 상태가 변하는 걸 확인할 수 있어서 편하다. 🧡 가로 세로 모드 구별하는 법 @mediascreenand (orientation: landscape[가로]) 더 알아보기 🧡 정리하기! 1. Media query는 원하는 css 조건을 추가할 수 있다. 2. Media query는 and를 써서 연결된다. 3. Min/max-device-wdth = 휴대폰 적용, 브라우.. 공감수 0 댓글수 0 2022. 9. 21.
Transition 와 Transformation 🤔 Transition 상태를 변하는 모습을 애니메이션화 한다. ex)style에서 a와 a:hover이 있다 - state가 없는 요소에 붙여야 한다. => ex) a:hover 불가능 - 가장 처음 태어난 곳(root), element에 있어야 한다. - 변화를 시키려면 양쪽 같은 속성이 꼭 있어야한다. - All = a 에서 a:hover 전부 변화 - Element를 선택해서 변화도 가능 😮Transition 명령어 (* = 대부분 사용) - Linear: 같은 속도로 변화 - *Ease-in: 초반에 빠르게 - *Ease-in-out: 느림 – 가속 - 느림 - *Ease-out: 끝에서 느리게 - Ease: 느린 시작 - 빠르게 - 천천히 종료(기본값). 🎉 transition 명령어 직접 경.. 공감수 0 댓글수 0 2022. 9. 21.
css의 color와 :root css에서 색깔은 매우 중요하다! 😃 css 색깔에 대한 코드 입력방법 3가지 # = 16진수 컬러코드 Rgb = (0, 0, 0) 값 Rgba = rgb+투명도값 vsc(visual studio code)에서는 tomato pink gray green 이런 식으로도 값을 줄 수 있다. (16진수 컬러에 포함됨) 😎 잡기술 :root = 변수를 저장 할 수 있는 기능 같은 코드가 반복되면 :root를 이용하여 변수로 만드는 것이 좋다. Ex) 추가내용 공감수 0 댓글수 0 2022. 9. 21.
states에 관한 내용 input:optional 속성이 설정되지 않은 모든 요소에 적용한다. input:지정 지정한 인풋을 설정할 수 있다. type이든, type안의 text든, placeholder의 username이든 무엇이든 가능하다. 😃 states의 "~"에 대하여 만약 placeholder~=”name”으로 설정되면 Name를 “포함한” placeholder은 다 적용된다. "~"는 포함한 모든 것을 적용시킨다. "$"는 작성한 것에서 끝에 오는 경우이다. "^"는 작성한 것에서 처음에 오는 경우이다. 😃 states 기능 몇가지들 element:active 요소를 누를 때 작용. element:hover 요소를 가져다 댈 때 작용. element:focus 요소가 선택되었을 때 작용 (키보드로도 가능). a:v.. 공감수 1 댓글수 1 2022. 9. 21.
Pseudo selector에 관하여 CSS pseudo class 는 선택된 요소의 특별한 상태를 지정하는 선택기에 추가된 키워드입니다. 예를 들어, :hover사용자의 포인터가 버튼 위에 있을 때 버튼의 색상을 변경하는 데 사용할 수 있다. :last(or first) child = 중복된 요소 중 마지막(혹은 첫번째) 타겟 :nth child (N) = 괄호안에 몇번째 자식을 넣을지 적고 타겟 가능 1) even(짝수) 넣을 시 2, 4 6, 8 . . . 2) odd(홀수) 넣을 시 1, 3, 5, 7 . . . 3) N+1 ( n번째요소로부터 +1) 2n, 3n, +1, +2 가능 4) N은 0부터 시작 🎈 😃 p 사이에 있는 span 만 변경하고 싶을 때 😃 ">" 에 대하여 div > span 는 div 바로 아래의 span만 .. 공감수 1 댓글수 2 2022. 9. 21.
Flexbox의 규칙 (매우중요) 1. 자식 element에는 어떤 것도 적지 말아야 한다. 부모 element에만 명시해야 된다. Ex) 부모 자식 자식 자식 부모 Display:Flex;를 이용한 다양한 속성들 Justify-content: center; (중심) Justify-content: end; (우측 끝으로) Justify-content: start; (기본값default) Justify-content: space-evenly; (자동 간격 정렬) Align-item: stretch (늘어남) but 요소(element)의 높이(height)를 고정시키면 적용 안됨 Ex) 1. 주축(main axis), 교차축(cross axis) 매우중요 Justify-content = 주축에 적용된다. Align-items = 교차축에 .. 공감수 0 댓글수 0 2022. 9. 20.
(중요) Box의 특별한 특징 3가지 [ margin, padding, border ] Margin: box의 border(경계)로부터 outside(바깥)에 있는 공간이다. margin값에 따라서 경계의 크기가 결정된다. 4방의 경계를 모두 각각 부여할 수 있다 Ex) margin-top: 10; margin-left: 20; margin-right; 50; margin-bottom: 30; 상하좌우: margin:value; 상하, 좌우: margin: value value; 상 우 하 좌: margin: value value value value; 없앨 경우: margin: 0; margin을 쓸 땐 꼭 따음표 금지,, 30분날림,, margin의 현상 Collapsing margins(마진상쇄)현상 Box의 border가 겹치면 margin은 하나가 된다. 위, 아래로만 발생한다. .. 공감수 11 댓글수 1 2022. 9. 20.
css box에 대한 동작요소 box에 대한 동작요소 1.style에서 같은 box(div header body footer ...) 묶으면 전체 적용 2. 브라우저에서 div는 적용되면 옆에 어떠한 박스도 오지않는다. => block span은 적용되면 옆에 다른 요소가 따라온다. => inline 이러한 형태를 이해하면 디자인에 도움이 된다. Inline에 포함되는 것 작은 글(span), 링크(a), 그림(img) Inline = no box (높이와 너비가 없다.) Block에 포함되는 것 대부분의 박스들 Block = box 즉 inline에 포함되는 것들을 외우면 구분하기 쉽다. Block -> Inline으로, Inline -> Block으로 가능하게 되는 법 = display:block Inline->Block은 그냥 .. 공감수 1 댓글수 1 2022. 9. 20.
그래서 CSS가 뭔데? 그래서 CSS가 뭔데? Cascading Style Sheet 브라우저가 CSS코드를 읽을 때 위에 있는 코드부터 차례차례로 읽힌다는 것. ㄴ> 그래서 중복이 되면 항상 마지막에 쓴 코드가 적용된다. ㄴ> 즉 코드의 순서가 결과의 영향을 끼친다. inline CSS html파일에 css코드를 입력하는 것 (tag:style를 이용) external CSS CSS파일을 include 하는 것 (link tag[]를 이용) 공감수 0 댓글수 0 2022. 9. 20.
css의 3가지 규칙 1. css = html 태그를 가르키는 일 [Point!] ex) this tag looks green! 2.Point = selector(속성) ex ) blue title 은 파란색, 글자크기, 글꼴 등등,, 3. selector을 하나로 묶기 위한 방법 { } curly bracket(중괄호) 올바른 selector 사용방법 tag grab { selector:value; } h1 { color:blue; } 항상 띄어쓰기를 하지않게 주의해야된다 CSS의 모든 속성(selector)들은 어떤 값(value)이든 쓸 수 있다. 하지만 color는 색을 써줘야 한다. 공감수 1 댓글수 1 2022. 9. 20.
HTML에 CSS를 추가하는 방법?! 방법은 2가지가 있다! 1. html파일에 html 코드와 css 코드를 놓는 방법 ( tag:style ) 2. css와 html을 분리시킨다. () rel= relationship (관계) rel="stylesheet" 필자는 원하는 부분의 css를 정리해서 볼 수 있는 2번 선택지가 더 좋다고 생각한다. style.css에 @import로 작성을 원하는 css를 만들어 이어지게 만들면 정리가 편하기 때문이다 공감수 1 댓글수 1 2022. 9. 20.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.