본문 바로가기

전체 글137

[코딩 공부_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.
[디자인_13] 네온사인 효과 만들기 1. 배경이 될 이미지를 가져온다 2. 배경 이미지가 스마트오브젝트인지 확인한다 아닐 경우 convert to smart object 클릭해서 스마트오브젝트로 변경한다 (저화질인 경우 + 어둡게 조금 더 처리하고 싶을 때 : filter > other > high pass) 3. 레이어 아래쪽, 색상 부분에서(동그라미 사선) 맨 위 solid color 클릭, 배경 톤을 잡는다 블렌드 모드로 맞추거나 opacity를 낮춘다 4. 글자를 입력한 뒤 색상 부분 오른족 맨위에 비비드한 색상으로 맞추고 alt+delete로 넣는다 5. 레이어 아래쪽, 색상 부분에서(동그라미 사선) 두번째 Gradinet 클릭, 색상바에서 한쪽은 투명한 걸로 바꾸고 색상 배경 톤과 유사하게 어둡게 잡는다. style 부분은 방사.. 2021. 3. 28.
[코딩 공부_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.
[디자인_12] 타이포그래피 포스터 만들기 테두리를 굵게 해서 타이포에 힘을 줄때 항상 테두리에다가 굵기를 줘서 제작했었는데 offset path라는 기능을 알게 되어 좋았다 이제는 offset path를 이용해서 타이포를 제작해야겠다는 마음이 들었다 따로 기획의도를 갖고 만드는 작업물이 아니여서 편하게 작업했던 거 같다 ! 역시 디자인은 내 작업물을 만들어야 재미있고 더 하고 싶어지는 거 같다 얼른 내 작업물을 또 만들고 싶다 !! 🥰 2021. 3. 25.
[디자인_11] GTQ 문제 1번 연습하기 느낀 점) 포토샵에 이런 기능이 있었구나!! 하는 생각을 많이 했다 ㅎㅎ 고등학교때 GTQ 3급 공부를 했었다 그때는 엄청 어렵다고 생각했었는데 선생님께서 이해하기 쉽게 설명해주셔서 그런지 금방금방 해결할 수 있었다 따로 어렵거나 힘들었던 부분은 없었고 예제와 위치가 동일하지 않게 작업한 거 같아 아쉬웠다! 비록 GTQ 시험을 치진 않지만 기능에 대해 많이 알게된 시간같아서 좋았다!! 2021. 3. 24.
[코딩 공부_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.
[디자인_10] GTQi 1급 연습하기 작업 시간 : 총 2시간 28분 2021. 3. 15.
[코딩 공부_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.
[코딩 공부_26] HTML에 아이콘을 넣어보자! 아이콘을 넣을 수 있는 방법 2가지에 대해 알아보자! ① XEICON (xpressengine.github.io/XEIcon/) - 회원가입 X ↓ 사이트 태그 안에 아래의 코드를 붙인다 ↓ ↓ 메뉴인 "LIBRARY"를 클릭하고 마음에 드는 아이콘의 제목을 아래와 같이 작성한다 ↓ xpressengine * 자세한 내용은 XEICON > GET STARTED 에서 확인이 가능하다 (xpressengine.github.io/XEIcon/started.html) * 아이콘 관련 기능에 대한 소개 : (xpressengine.github.io/XEIcon/examples.html) ② Fontawesome (fontawesome.com/) - 회원가입 O - 회원가입 후, 계정을 클릭하고 "font awes.. 2021. 3. 9.
[코딩 공부_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.