본문 바로가기

전체 글

 (89)
html/css #13 Braista 실습 position, --, media쿼리복습, 그리드시스템 이미지가 변경될 가능성이 높은지? (header 배경) -> 업데이트가 되는 부분은 마크업으로 들어가는 것이 훨씬 유리하다! absolute로 지정된 요소는 flex items가 될 수 없다. ㄴ 이 요소의 배경은 absolute로 지정되어, z-index: -1로 배경처럼 설정되어 있다. 그렇다면 flexbox를 적용하더라도 flexitems가 되지 않는다 . -- 사용해서 사이즈/색상 관리하기 :root { --gap: 20px; --color-primary : salmon; --color-primary-light : seashell; } .section{ background-color: white; border: 1px solid var(--color-primary); padding: var(--g..
특강 #3-이력서, 포트폴리오 이제 시작해야할 때 이력서와 포트폴리오 스스로 만들어볼 수 있어야 함 1. 나만의 학습 프론트엔드 로드맵 그려보기 - 지원하고 싶은 회사의 스펙, 우대사항 찾아보기 - 깃허브링크 보기 - CS 지식이나 자바스크립트가 중요하게 적혀있었다. - roadmap.sh 우선순위를 정하는게 중요한데 => '맥락' 속에서 존재함 - 프론트엔드 기술을 내가 어디에 써먹고 싶은가? - ex) 파워포인트를 공부한다고 할 때 -도형, 사진 편집, 동영상 편집, 애니메이션, 다양한 수식 여러가지 기능들이 많은데, 이 기능을 모두 배운 후에 할 줄 안다고 하면 너무 오래걸린다. - 파워포인트의 본질은 내가 프레젠테이션을 잘하기 위한 도구이다. - 슬라이드 1~2장 만으로도 내가 전달하고자 하는 메시지를 효과적으로 전달하는 것이 더 중요 => 소프..
html/css #12-css variables 색상관리 .card.type~~ 하위에 있는 자식 요소에는 모두 var(--accent-color) 를 선언하여 해당하는 색상을 관리해줄 수 있음 색상 변경과 같은 유지보수에적합하다. ex) color : var(--accent-color); background-color: var(--accent-color); :root로 초기화하면 global vatiable이 된다.
html/css #11-vw단위, z-index 쌓임맥락, 벤다이어그램 쌓임맥락 MDN https://developer.mozilla.org/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context 쌓임 맥락 - CSS: Cascading Style Sheets | MDN 쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는 developer.mozilla.org 창 크기에 따라 이미지가 비율을 유지할 수 있도록 만든다 1번째 방법) min-height에 vw값 주기 .header { box-shadow: inset 0 0 20px ..
html/css #9-flexbox 반응형 맛보기: 수도 엘리먼트, 네거티브마진 (insideout 과제) insideout 과제 l-wrapper로 통일된 레이아웃 만들기 header와 body 안의 컨텐츠가 한덩어리로 관리가 되어야 한다. ㄴ같은 클래스를 주어 width 크기를 동일하게 준다. line-height : 1 -> 폰트 크기와 같이 가져가겠다! 수도 엘리먼트 contents_subtitle::before{ content: 'oooo'; } => 새로운 개념! css에서 마크업을 조작할 수 있는 기법. : -> 한개짜리는 sudo class 이고 :: -> 두개짜리는 ::before -> 내부 컨텐츠 이전에 해당 마크업을 추가한다. ::after -> 내부컨텐츠 이후에 해당 마크업을 추가한다. *꾸미는 용도에서 마크업을 추가하는 일에 활용한다. (확장이 많이될 수 있다.) 컨텐츠 flexbox나..
html/css #10-My Bucket List 정리 (수도 엘리먼트, flexbox 내부 컨텐츠 안정화, box-sizing) *수도 엘리먼트는 inline 이다. 수도엘리먼트를 통해 꾸밈 주기 .bucketlist-header { height: 120px; /*디자이너가 의도한 값*/ display: flex; align-items: center; color: #FF007A; } .bucketlist-header::before { background-color: currentColor; /*★수도 엘리먼트는 inline 이다!!! ★*/ display: inline-block; content: ' '; width: 8px; height: 32px; border-radius: 0 10px 10px 0; flex-shrink: 0; } ㄴ 상위 박스는 flex 로 부여하여 좌우 정렬한다. ㄴ sudo 엘리먼트 before를 통해 ..
html/css #10-position 어떤 요소의 위치를 움직일 때 , margin을 직접 움직일 수 있지만 (공간 자체가 달라짐) 공간자체가 달라지면 다음요소에게 방해를 줄 수 있기 때문에 공간은 그대로 두고 시각적으로만 움직이는 position을 사용할 수 있다. opacity position 초기값 : static (정적인) relative : 자기 자신을 중심으로 이동한다. 현재 내 위치에서 이동한다. / left, right, top, bottom 등으로 위치를 줄 수 있다. * relative는 공간은 그대로 두고 시각적으로만 움직인다. * 빨간 네모 상자는 margin 공간이고, 시각적으로만 움직인다. absolute: Containing block (기준으로 요소 이동한다 최초 부모 기준점 : viewport의 왼쪽 상단 최초..
html/css #8-flex-direction flex-direction : column이 되면 기존에 row일 때 justify-content와 align-items의 개념이 반대로 된다고 생각하면 된다. 상하 정렬 : justify-content 좌우 정렬 : align-items row -> 열 , column -> 열에 해당하는 값(행) flex-direction 훨씬 더 자유도 높게 배치할 수 있다. row : 가로열 row-reverse : 가로열 반대를 기준으로 배치 column: 세로로 배열한다. flex-direction:cloumn 을 유의하자 우리가 아는 가로 세로 상식이 바뀌니까 유의하자 ex) flex-basis는 이제 더이상 width의 개념이 아니고 height가 됨 *참고 : 상하 gap을 주기 위해 flex-direct..

티스토리툴바