본문 바로가기

웹/CSS71

[코딩 공부_44] self_introduce 만들기_2 style.css html 이예빈 안녕! 나는 예빈이야! food 저는 음식을 정말 좋아합니다! 밥 먹는 게 너무 좋아요 c4d 배우고 있는데 너무 어려워요! 머리가 어지러워요 painting 그림 그리는 건 취미에요! 너무 즐거워요 software skills html5 90% css3 80% javascript 90% jqurey 60% photoshop 80% illustator 90% Leeyebin www.helloworld.com | phone. 010-1234-1234 | leeyebin.green@gmail.com 결과화면 오늘은 복습을 하기 위해 self_introduce를 예쁘게 꾸며보았다 내가 좋아하는 가수의 동영상을 넣기 위해 유튜브에서 코드를 복사 붙여넣기 했었는데 재생이 안되서 .. 2021. 4. 4.
[코딩 공부_43] transform - translate, scale, skew, rotate? 오늘 배운 내용인 transform의 translate, scale, skew, rotate에 대해 정리하는 시간을 가져보겠다! ① translate : 이동 - element 현재의 위치에서 이동을 시작한다 - value : px(x축, y축), %(본인 크기에 대한) / translateZ(px) : 3D에서 사용한다 - 기본 형태이다 gold 색에는 translate를 coral 색에는 margin-left를 넣어 차이를 주도록 하겠다! - translate를 주어 위치를 이동시키면 전체적인 박스형태는 그대로 gold 박스만 이동하지만, margin은 전체적인 박스도 같이 움직이기 때문에 hover같은 기능을 주었을 때 왔다리갔다리 하는 요상한 버그가 생기게 된다! 차이점을 유의해서 사용하자!! ②.. 2021. 4. 2.
[코딩 공부_42] self-introduce 만들기_1 오늘은 self-introduce를 만드는 실습을 했다 나는 하드코딩한다고 엄청 헤맸다 😥 열심히 꾸미려고 하니 시간이 끝나서 허겁지겁 캡처하고 압축해서 제출했다 ,, 코딩을 하면 할수록 엄청 어렵고 머리 아파서 재미있는 지 잘몰랐었는데 이번 실습을 하면서 코딩에 대한 재미가 느껴졌다! 주말에 더 꾸며보는 시간을 가져볼 것이다!! 😎 yebin.lee 안녕하세요 저는 예빈이에요! 코딩도 디자인도 너무너무 재미있어요! 가끔 머리 아프지만 결과물을 보면 뿌듯하고 두근거려요! 얼른 배워서 저만의 홈페이지를 만들고 싶어요 엄청 뿌듯하겠죠?ㅎㅎ intoduce Lorem ipsum dolor sit amet consectetur adipisicing elit. A nisi aspernatur quasi velit.. 2021. 4. 1.
[코딩 공부_41] transitions 적용하기 ① transitions : 엘리먼트의 두가지 상태 사이에 변화를 줄 수 있다 - transition-timing-function 종류 linear 균일하게(가장 많이 사용) ease 잠깐 느리게 빠르게 느리게(기본값) ease-in 느리게 빠르게 ease-out 빠르게 느리기 ease-in-out 느리게 빠르게 느리게 - hover를 줄 때 사용하며, transitions은 hover가 아닌 곳에 넣어줘야 한다 (default) - 의도에 따라 달라질 수 있다 ex1) ease linear ease-in ease-out ease-in-out ex2) hover/zoom/transition 2021. 3. 31.
[코딩 공부_40] 음수마진(negative margin)에 대하여 ① 음수마진(negative margin) : 마이너스 값으로 margin을 설정한다! 시작점을 앞당긴다고 생각하면 된다 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum pariatur, fugit voluptate omnis exercitationem tempore placeat, alias iusto aspernatur quis suscipit ut neque necessitatibus laboriosam sed consequuntur illo numquam ullam! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus omnis, necessitatibus con.. 2021. 3. 29.
[코딩 공부_39] 가상 요소 셀렉터 1) 가상 요소 : 요소의 특정 부분을 선택한다. - :(단일 클론), ::(이중 클론)의 차이 : IE8의 경우 CSS3를 지원하지 않기 때문에 싱글콜론만 지원이 가능하다 그래서 :(단일클론)만 사용하는 게 호환성이 더 좋다 ① :before - 요소의 앞을 선택하며, 스타일적으로 content를 추가할 수 있다 ** inline 속성이다 (스타일적으로 content에 추가한다는 뜻은 꾸미기 위한 용도에서 끝나는 것이라고 생각하면 된다!) p:before { content: "hello"; color: gold; } world ② :after - 요소의 뒤를 선택하며, 스타일적으로 content를 추가할 수 있다 ** inline 속성이다 p:after { content: "hello"; color: .. 2021. 3. 26.
[코딩 공부_38] li 간격 없애는 방법 3가지 코드를 작성하다보면 많이 쓰게 되는 태그가 바로 "li"이다 리스트를 나열할때 자주 사용하는 태그인데 가로로 배열해서 간격을 동일하게 주고 싶어서 시도를 해보면 내가 생각했던 대로 되지 않던 경우가 많았다 그래서 오늘은 태그 사이의 간격을 적절히 떨어뜨리는 방법에 대해 알아보고자 한다! 내가 구현하고 싶은 화면은 아래와 같다 (아이콘을 가로로 배열하고 태그 사이의 간격을 동일하게 주기) 1. 아이콘 나열하기 먼저 html에 ul li태그로 아이콘을 둘러싼다 ** 이때, ul로 묶어주게 되면 ● 모양으로 리스트를 구분하게 되는데 reset.css 파일을 만들어 "li {list-style: none;}"을 주게 되면 ● 모양 없이 리스트가 나열된다 * a 태그의 하이퍼링크 표시 없애는 방법 : a {tex.. 2021. 3. 24.
[코딩 공부_37] 인스타그램 실습하기 저번주에 이사를 해서 블로그에 신경을 못썼다 🙄,, 다시 열심히 포스팅해야겠다(화이팅!) 오늘 인스타그램 시험을 쳤었다! 요번 인스타그램 실습 관련하여 코드와 결과화면을 올리고 나의 느낀 점에 대해 이야기해보도록 하겠다! 내 스토리 saera justine hans.park.dev 중구 국채보상로 zz green님 외 100명이 좋아합니다 @charset "utf-8"; @import "reset.css"; #app { width: 500px; margin: 5% auto; border: 1px solid #999; border-radius: 10px; background-color: rgba(255, 255, 255, 0.7); overflow: hidden; } /* header */ /* gnb *.. 2021. 3. 23.
[코딩 공부_36] CSS로 카카오 실습 꾸미기 수업시간에 계속 카카오 실습을 하고 있다😊 각 페이지마다 html 코드를 작성하고 CSS로 꾸미는 작업을 하고 있고, 지금 홈-채팅-뉴스까지 했다 CSS로 꾸미는 작업까지 들어가니 재밌기도 하고 복잡했다 ㅎㅎ,, 사실 vertical align으로 정렬하는 방법을 들었을 땐 알겠는데 막상 내가 칠땐 엄청 헤매서 할때마다 검색했었는다 ,, 요번에 수업들으면서 개념을 딱 알게 됬다 ! 주말에 꼭 한번더 실습해보고 내 지식으로 만들겠다!!😤 @charset "utf-8"; * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; color: inherit; } h1, h2, h3,.. 2021. 3. 17.
[코딩 공부_35] bem class명 규칙 오늘은 css 클래스 네임을 어떻게 지으면 좋을지 고민하는 시간을 가져보도록 하자! 1. BEM의 기본 구조 - BEM은 Block, Element, Modifier를 뜻한다. - 저 세가지를 이용하여 각각 __와 --로 구분한다. ① 블럭(Block) : 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말한다 .header { property: value; } .footer {{ property: value; } ② 요소(Element) : 블럭이 포함하고 있는 한 조각이다 (__로 표시) .header__logo { property: value; } .header__tagline { property: value; } .header__searchbar { property: value; } ... 2021. 3. 16.
[코딩 공부_34] css 복습하기 오늘은 복습을 하기 위해 요리 레시피를 주제로 html 문서를 만들어봤는데 ,, 기획을 간단하게 해서 금방 만들었다,, 다음에 할땐 더 구체적으로 기획해서 연습해봐야겠다! 김치찌개 돼지고기, 김치, 설탕, 간장, 대파, 다진마늘 1. 돼지고기는 찌개용으로 먹기좋은 크기로 준비한다. 2. 김치는 먹기 좋게 잘 썰어서, 다진마늘, 설탕 각 큰 숟갈 1스푼 넣고 냄비에 들기름 두르고 볶아준다. 3. 2번 냄비에 물을 적당량 부어서 끓인다. 4. 1번의 돼지고기를 넣고, 된장 반스푼 정도를 넣어 돼지 잡내를 잡고, 간도 한다. 5. 간장 살짝 넣어서 간 맞춘다. tip) 이 때 같이 넣으면 더 맛있는 재료들을 파만 빼고 다 넣어주면 됩니다. 6. 중불 정도에서 푹~ 끓여준다. 7. 마지막.. 2021. 3. 14.
[코딩 공부_33] css, 가로·세로 중앙정렬하기 오늘은 css로 세로, 가로 중앙 정렬하는 방법을 알아보겠다! 세로, 가로 중앙정렬하는 개념은 정말 어려운 거 같다 😑 이론으로만 이해하려하지말고 꼭 실습해보면서 익히는 걸 추천한다!! - 가로 중앙 정렬은 text-align을 center로 하면 쉽게 중앙 정렬이 가능하다. 하지만 text에만 적용되기 때문에 text가 아닌 경우엔 display를 inline으로 설정하고 사용해야한다 - margin을 auto로 주게 되면 중앙 정렬이 되지만block 요소만 적용이 가능하기 때문에 주의 해야한다! - inline 요소를 수직 정렬 하기 위해선 Vertical-align을 꼭 알아야 한다 ① vertical-align - inline, inline-block에서 사용(div에서 사용하면 작동되지않음) -.. 2021. 3. 13.
[코딩 공부_32] wiki.html을 css로 꾸며보자 오늘 수업은 wiki.html을 css로 꾸미는 실습을 하였다! 수업시간에 해봤는데 아직 셀렉터를 활용을 잘못하고 엉망진창으로 코드를 작성한 거 같아 마치고 다시 해봤다!! 검색하고 내가 전에 썼던 블로그도 보면서 해결할 수 있었다 블로그 쓰는 게 재밌기도 하지만 매일매일 쓴다는게 귀찮아서 미룬 적도 많지만 오늘만큼은 유용하게 쓴 거 같아서 기분이 좋다 😎 아직도 많이 미흡해보이지만 코드와 결과화면을 올리겠다!! 01-wiki.html 위키백과:요청 위키백과, 우리 모두의 백과사전. 관리 요청 도움이 필요하신가요? 각 사항 요청에 맞는 페이지를 방문해 주세요. 요청을 하기 전에 반드시 가이드라인을 읽어 주세요. 삭제 요청 문서의 삭제를 신청하시는 경우 해당 문서에 {{삭제 신청}} 또는 {{특정판 삭제 .. 2021. 3. 12.
[코딩 공부_31] CSS 박스 모델 CSS 박스 모델에 대해 알아보자 박스모델이란 무엇일까? HTML 태그들은 모두 박스모델을 갖고 있다 F12를 누르고 Elements 탭으로 가서 아무 태그나 눌러 style탭을 보면 아래와 같은 그림이 나온다 이것이 바로 박스모델이라 한다 margin - border - padding - content 순으로 둘러싸고 있는 박스모델에 대해 자세하게 설명하도록 하겠다 ① margin : 다른 태그와의 거리를 나타낸다 - box-sizing, border-box, content-box는 width에 포함되지 않는다! ② border : 테두리를 말한다 - width에 포함되지 않으며, 굳이 padding을 넣지 않아도 생긴다! ③ padding : 내용과 테두리 사이의 간격이다 - background-co.. 2021. 3. 11.
[코딩 공부_30] wiki.html을 css로 꾸며보자 2 오늘은 어제 실습한 위키 2를 복습해보면서 새로 정리해보았다 위키 2를 할때 어떻게든 되면 됬지 싶어서 div ~ div로 셀렉터를 잡았었는데 선생님이 많이 당황해하셨다 ㅎㅋㅋㅋ 그 뒤로 삐뽀삐뽀 위기다!! 위기!라고 생각해서 열심히 복습 중이다 😂 잘하고 있는 건지는 잘모르겠지만 ,, 확실히 그 전에 쳤던 코드보다 깔끔하고! 빠른 시간안에 해결했다 ! 어제 복습할 떄는 2시간 30분정도로 해결했는데 오늘은 1시간 30분정도 걸렸다! 뿌듯하다! 위키백과:사용자 모임 위키백과, 우리 모두의 백과사전. 위키백과 사용자 모임 한국어 위키백과의 커뮤니티 포털로, 사용자들의 편집 활동을 보조하기 위한 도움말이나 프로젝트를 모아둔 곳입니다. 토론과 의견 교환은 사랑방에서 이루어지고 있습니다. 위키백과에 관해 궁금한.. 2021. 3. 11.
[코딩 공부_29] line-height / text-align 에 대하여 ① line-height : 인라인 박스의 높이를 지정한다 (=행간) 값 normal | | | | inherit 기본값 normal 적용대상 모든 요소 상속 상속됨 % 엘리먼트 자체의 글꼴 크기를 참조 미디어 visual 2021. 3. 10.
[코딩 공부_28] reset.css ① reset.css - html 요소에 내장된 고유 CSS 스타일 속성을 초기화 시켜서 크로스브라우징(=브라우저마다 동일한 모양) 구현할 때 유용하다 ** 크로스 브라우징이란? - 마크업을 하면서 지켜야 하는 4가지 원칙 중 하나, 웹 표준 / 웹 접근성 / 시맨틱 마크업 / 크로스 브라우징 * HTML 요소 기본 CSS 초기화 * 그 외 CSS 리셋 코드 더보기 Eric Meyer’s “Reset CSS” 2.0 https://meyerweb.com/eric/tools/css/reset/ HTML5 Doctor CSS Reset https://html5doctor.com/html-5-reset-stylesheet/ Yahoo! (YUI 3) Reset CSS https://yuilibrary.com/.. 2021. 3. 10.
[코딩 공부_27] box-shadow가 무엇일까 ① box-shadow : 선택한 요소에 그림자 효과를 만들어주는 속성이다 문법 설명 none 그림자 효과를 없앤다 x-position (필수) 가로 위치 y-position (필수) 세로 위치 blur 그림자를 흐리게 만든다 값이 클 수록 더 흐려진다 spread 양수일 경우, 그림자를 확장하고 음수인 경우 축소한다 color 그림자의 색상을 정한다 inset 그림자를 요소의 안쪽에 만든다 initial 기본값으로 설정한다 inherit 부모 요소의 속성값을 상속받는다 +) 실습 shadow +) 결과 2021. 3. 10.
[코딩 공부_25] box-sizing 하기! ① box-sizing : 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다 - width와 height는 엘리먼트의 컨텐츠의 크기를 지정한다. 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다. box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다. 출처) box-sizing - 생활코딩 box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하 opentutorials.org 2021. 3. 9.
[코딩 공부_24] CSS Selector, 가상 셀렉터 1. 동적 셀렉터 : 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법 ① a:link → 셀렉터가 방문하지 않은 링크일때 가상 셀렉터 naver hershes yahoo ② a:visited → 셀렉터가 방문한 링크일 때 가상 셀렉터 naver hershes yahoo ③ a:hover → 셀렉터에 마우스가 올라와 있을 때 가상 셀렉터 naver hershes yahoo ④ a:active → 셀렉터가 클릭된 상태일 때 가상 셀렉터 naver hershes yahoo ⑤ a:focus → 셀렉터에 포커스가 들어와 있을 때(tab) 가상 셀렉터 naver hershes yahoo 2. 구조 가상 클래스 셀렉터 ① :first-child → 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 .. 2021. 3. 9.
[코딩 공부_23] CSS, 복합 셀렉터에 대해 알아보자 html 문서를 꾸미는 방법은?? html 요소(element)를 선택해서 꾸며줄 수 있다. element 선택 방법인 복합 셀렉터에 대해 알아보자! ① 자식 셀렉터 HELLO HELLO HI HELLO - 기호 ">"를 사용하여 나타낸다 - 부모 태그 바로 아래에 있는 자식 태그만 선택이 가능하다 (첫째만 가능!!) ② 후손 셀렉터 - "+"로 나타낸다 - 지정된 요소 바로 다음 요소를 선택할 때 사용한다 ④ 형제 셀렉터 - "~"로 나타낸다 - 지정된 요소 다음에 오는 모든 요소를 선택할 때 사용한다 2021. 3. 8.