티스토리

rose and more

검색하기

블로그 홈

rose and more

roseandmore.tistory.com/m

없쟈냐옹 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

웹1_240206(position absolute와 fixed) https://codepen.io/leenyooo/pen/QWoxVQP position ... codepen.io flex보다 더 많이 사용하게 되는 position 모든 태그들은 처음에 position: static 상태 absolute와 fixed 특징 ** absolute와 fixed는 한가지 특징을 제외하고 전부 동일한 특징을 가지고 있다. 1. absolute가 처음 적용되었을때 static상태인 위치에 고정되어있다. 2. absolute, relative, fixed는 위치속성으로 화면 특정 좌표에 고정 될 수 있다. ㄴ x가로, y세로, z입체적공간 ㄴ위치속성( left, right, top, bottom) ㄴabsolute, fixed는 위치속성으로 여백을 조정하는 경우가 많다. 위치속성과.. 공감수 0 댓글수 0 2024. 2. 6.
웹1_240205(디자인삼성 탑바 완성) img태그에 여백이 생기는 이유 - 기본 display속성값이 inline이기 때문에 여백이 생긴다. 처리방법은 여백이 생기지 않는 다른 display속성값으로 바꿔주면 된다. https://codepen.io/leenyooo/pen/GReGJWb 디자인삼성탑바_완성 ... codepen.io div 클래스에 중복되는 태그는 한번더 공통클래스를 추가해서 공통으로 입력값을 적용시켜준다. ex) #UXUI 공감수 0 댓글수 0 2024. 2. 5.
웹1_240202 삼성디자인 탑바 만들기_2 목록과 리스트태그(ul,li) 영역별로 목록과 리스트 리스트태그는 너무 크게 묵어서 사용하기는 힘들다. https://codepen.io/leenyooo/pen/xxBWMwJ 목록과 리스트태그(ul,li) ... codepen.io 리스트 생성시 ( li ) 자동으로 앞에 ●이 생성 된다. 하지만 못생겼기 때문에 없애주는 작업을 해서 사용한다.(노멀라이징) 바디에도 기본적으로 여백이 있기때문에 body, ul, li 모두에게 값을 같이 적용시킨다. [목록과 리스트태그 주의사항] 1. ul태그 없이 li태그를 사용하거나, li태그 없이 ul태그를 사용할 수 없다. (웹 표준에 맞지않고 코드가 실행되지 않는 경우가 있음) 2. ul태그 자식태그로는 li태그만 사용할 수 있고, li태그 자식으로는 어떤 태그를.. 공감수 0 댓글수 0 2024. 2. 2.
웹1_240201 수업 (vscode) - 삼성디자인 탑바 만들기-1 젠코딩 작성 후 안먹힐때 -> f1키 누르기 -> emmet:expand 엔터 left-box와 right-box를 가로로 정렬하고 싶으면 상위 부모엘리먼트인 container에게 display: flex;를 적용 시켜주면 플렉스아이템으로 상속 된다. 반반 영역을 주기 위해서 flex-grow: 1; 입력하고 각각의 영역에 영향을 주지 않기위해서 flex-basis: 0; 입력한다. https://roseandmore.tistory.com/13 참고! 메뉴에서 상세페이지로 이동할수 있게 해주는 nav는 div(클래스)를 달지 않고 단독으로 태그로 사용한다. https://tcpschool.com/html-tags/nav 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기.. 공감수 0 댓글수 0 2024. 2. 1.
웹01_240131수업 https://www.figma.com/file/AiMJOqG42GrWyBXvCHVtIN/%ED%94%BC%EA%B7%B8%EB%A7%88%EB%A1%9C-%EC%98%88%EC%A0%9C%EB%B3%B4%EA%B8%B0?type=design&node-id=0-1&mode=design Figma Created with Figma www.figma.com https://docs.google.com/document/d/1AOOYumla_bS5C6hfQXv_S8IyZ8du-e6CrV5XgdcqtkM/edit 코드 제출 docs.google.com 바디의 자식에는 고정픽셀을 넣지 않는다. 1920 이랑 1080과 같이쓰면 어긋나게 보여짐 https://codepen.io/leenyooo/pen/ZEProaK 삼.. 공감수 0 댓글수 0 2024. 1. 31.
웹01_230129수업 https://codepen.io/leenyooo/pen/mdopWYV 이미지태그 ... codepen.io img태그 특징 width 혹은 높이 둘중 하나만 커스텀하면 이미지 비율이 유지 되면서 사이즈가 조절 된다. css에서 직접태그하기 img 태그는 너비높이 둘 다 커스텀하게 되면 비율이망가진다. 이때 해결할 수 있는 코드는 object-fit: cover; object-fit: cover; -> 사용처 1. 고정형 이미지 -> 망가진 비율 복구 2. 반응형 이미지 -> 세로가 고정된 반응형 이미지 구형 3. 비디오 -> 너비높이 커스텀 구현 object-fit: cover; -> backgroung-image속성에 사용할 수 없다. 저작권 - 포트폴리오도 상업적인 목적으로 생각해야한다. - 무료로.. 공감수 0 댓글수 0 2024. 1. 29.
웹01_240126수업(flex-grow) vscode설치 https://codepen.io/leenyooo/pen/QWoObxo flex-grow ... codepen.io flex-grow는 flex-container 에 남아있는 공간을 각각의 flex-item이 n값만큼 나눠 가진다. flex-item은 row값일때 width: auto = 0 이다. flex-grow는 flex-item이 flex-container에 남는 공간을 사용하겠다는 의미를 가진다. https://codepen.io/leenyooo/pen/BabmoNb flex- grow비율 망가짐 방지(flex-basis) ... codepen.io flex-grow를 사용하게 되면 하위요소크기에 따라 비율이 달라진다. 방지하는 방법은 flex-grow와 flex-basis: 0;과 함께 사용하.. 공감수 0 댓글수 0 2024. 1. 26.
웹_240125수업 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com [flex-direction] -> flex-item 방향정렬 row - 가로 한줄에 같이 배치 : 기본값 justify-content:; -> 가로 작동 align-items;: -> 세로작동 flex-grow -> 가로에서 작동 column - 세로 한줄에 하나씩 배치 justify-content:; -> 세로 작동 align-items;: -> 가로 작동 flex-grow -> 세로에서 작동(높이) -> reverse를 사용하게 되면 start와 end방향이 바뀐다. ex) - row justify-content: flex-star.. 공감수 0 댓글수 0 2024. 1. 25.
웹1_240123 ( flex 시작) https://codepen.io/leenyooo/pen/dyrzXrb flex시작하기 ... codepen.io 플랙스는 인라인 블럭의 단점을 보안해서 나왔다. 인라인블럭은 박스사이징 해야 안으로 들어가는데 플랙스는 기본값으로 인라인이 들어가서 유연하게 작동한다. --> flex-shrink *flex - 줄바꿈이 안됨 특정 태그 입력해야 줄바꿈 가능. [ flex 공통 특징] 1. flex-item으로 만들고 싶은 태그를 감싸는 태그에 display: flex;를 적용한다. 2/ display: flex; 를 적용한 태그를 flex-container 라고 부르고 그 자식들을 flex-item이라고 부른다. 3. flex-container 자식들만 flex-item이 적용 되고 flex-item에 자식.. 공감수 0 댓글수 0 2024. 1. 23.
웹1_240122수업 https://codepen.io/leenyooo/pen/WNmjEJW?editors=1100 마켓컬리 상단바 제작3단계 ... codepen.io 텍스트 속성은 상속되는성질을 가진다. 텍스트 요소를 정렬 할때는 텍스트를 감싸고 있는 태그에 적용 .top-bar-section { border: 1px solid red; height: 70px; } .top-bar-section > .container { border: 1px solid orange; width: 1080px; height: 100%; margin-left: auto; margin-right: auto; font-size: 0; } .top-bar-section { border: 1px solid red; } .top-bar-section.. 공감수 0 댓글수 0 2024. 1. 22.
웹1_240119수업 그리드 배우기 https://codepen.io/leenyooo/pen/dyrWRBp 마켓컬리 상단바 제작1단계 ... codepen.io https://codepen.io/leenyooo/pen/XWGRamW 마켓컬리 상단바 제작2단계 ... codepen.io div.left-box+div.center-box+div.right-box 그냥 인라인으로 쓰면 너비높이 수정이 안됨 그래서 인라인-블럭 으로 써야함 border 처리시 아웃라인이 기본 인라인 하고싶으면 box-sizing: border-box; 옛날코드 짤때 다시한번 보기 https://codepen.io/leenyooo/pen/WNmjEJW?editors=1100 마켓컬리 상단바 제작3단계 ... codepen.io div.li{list-$.. 공감수 0 댓글수 0 2024. 1. 19.
웹1_240118 수업 컨텐츠 안쪽 여백 패딩으로 주고, 컨텐츠 사이에 여백을 마진 주기. 상하는 인라인 요소만 고정된상태로 밀린다. https://codepen.io/leenyooo/pen/MWxpjoa padding ... codepen.io https://codepen.io/leenyooo/pen/MWxpLYb 도형요소 정렬 ... codepen.io 예를들어 상위 엘리먼트 값이 1200일때 오브젝트값이 500이라면 left값을 자동으로 700이 되는것이다. 700을 전부 사용해서 밀어버리기 때문에 오브젝트는 오른쪽으로 정렬되게 된다. 메모장에 내가 움직이고 싶은 태그 -> img태그 -> img태그 display요소 inline -> inline 요소 정렬 텍스트취급 - text-align:; ㄴ text-alige은 .. 공감수 0 댓글수 0 2024. 1. 18.
웹1_240117 수업 https://codepen.io/leenyooo/pen/zYbZBdg 복습 ... codepen.io 태그생성할때 클래스를 . (점)으로 써서 자동생성 시키겠다. {} 텍스트 . 클래스 # id * 여러개 생성 [] h같은 태그 속성 --- 자동완성 기능 -- a / href (속성)/ /= (대입한다)/ "(속성값)" _self https://codepen.io/leenyooo/pen/QWodBjr 하이퍼링크와 앵커태그 ... codepen.io 노멀라이즈 - 커스텀 되어있는 태그를 기본상태로 돌려주는 행위 ex) a태그 노머라이즈 a {color: inherit; text-decoration: none;} 주의사항 1. 노멀라이즈와 커스텀은 따로 작성해줘야 한다. ex) a {color: inher.. 공감수 0 댓글수 0 2024. 1. 17.
웹1_240116 수업 > 블럭 중요함block특징:-> 한줄에 하나씩배치가 된다.(크기가 엄청나게 작아도)-> width가 기본값일때 100%로 작동한다. (부모엘리먼트 너비만큼 너비를 가진다.)-> inline 태그를 제외하고 전부 block태그이다.(button 태그 예외) https://codepen.io/leenyooo/pen/KKEaVZz 부모엘리먼트를 넘어갈때 처리방법(overflow)...codepen.ioclass1. 같은태그끼리 별명을 지어 개별커스텀2. 코드가 같은것들 끼리 그룹화 overflow상위 엘리먼트가 하위 엘리먼트를어떻게 처리할것인지 결정하는 속성overflow: hidden;-> 넘칠때 잘라서 보여줌-> 슬라이더overflow: auto;-> 넘칠때 스크롤처리-> 특정한 섹션만 스크롤overfl.. 공감수 0 댓글수 0 2024. 1. 16.
웹1 - 0115_4번째 수업 지각 ..ㅜㅠ div class 선택자 https://codepen.io/leenyooo/pen/PoLWZwx class 선택자...codepen.io class와 id의 차이점class는 같은 이름을 사용할 수 있다.thml : class="" , css 선택자 : .id는 같은 이름을 여러번 사용할 수 없다.thml : id="" , css 선택자 : # 프론트엔드영역에서 많이 사용 이름 지을때 주의사항- 영문부터 시작해야한다.- 숫자만 사용할 수 없다.- 누구나 구분할 수 있도록 짓는게 좋다. 이름 짓기두 단어 이상 - 를 쓴다. -> best-item언더바 사용 금지 _ 뒷 단어에 대문자 활용이 가능하다 -> best-Item"~안에 있는~"로 표현 가능하다. -> best-item__text-b.. 공감수 0 댓글수 0 2024. 1. 15.
웹01-3일차 수업 https://codepen.io/leenyooo/pen/yLwamyJ block 특징 ... codepen.io https://codepen.io/leenyooo/pen/GRejVoL inline특징 ... codepen.io https://codepen.io/leenyooo/pen/poYEMwR inline-block 요소 특징 ... codepen.io block - width: auto = 100% - 한줄에 하나씩 배치 - 너비높이 커스텀 가능 -브라우저에서 도형취급 inline - width: auto = 0 - 한줄에 "같이"배치 - 너비높이 커스텀 "불가능" - 브라우저에서 "텍스트" 취급 inline-block - width: auto = 0 - 한줄에 "같이"배치 - 너비높이 커스텀 ".. 공감수 0 댓글수 0 2024. 1. 12.
웹1 - 2일차 https://codepen.io/leenyooo/pen/rNRMwaV div 태그 특징 크기 ... codepen.io 자동완성 tab 컨트롤 쉬프트 방향키 단어선택 쉬프트키 + 홈키 앤드키 - 문장선택 html 버전에 따라서 사용하는 구조나 태그가 좀 달라질수있다. 독타입 구조 현재 배우는 구조는 html5 헤드에서는 어떤것인지 설명 본격적으로 시작되는것은 바디 https://codepen.io/leenyooo/pen/GRejEWB body 크기 ... codepen.io 일러스트는 백터기반으로 cmyk -> 인쇄 기반 (도트) 포토샵은 비트맵(픽셀단위) 이미지 기반 (각각의 색상정보를 가진) 웹에서도 포토샵과 동일한 픽셀단위를 사용 https://codepen.io/leenyooo/pen/vYPXZ.. 공감수 0 댓글수 0 2024. 1. 11.

문의안내

티스토리
로그인
고객센터

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