![]()
흠 인스타 감성처럼 로고 밑 글자의 간격을 좀 떨어뜨려 놓고 싶다. 사실 저 Shine photo film은 내 이름 이니셜인 SH에 어거지로 끼워 맞추기 위해 지은거임 저거 외 아무것도 생각 안나서 좀 구리지만 반강제적으로 쓰게 됨 shine photo film 이렇게 붙어 있는 글자들의 사이를 떨어뜨리고 싶음 s h i n e p h o t o f i l m 이렇게 1. 자간 (글자 간격) : letter-spacing .intro_sub_txt{ margin-top: -8px; text-align: center; font-style: italic; letter-spacing: 10px; /*word-spacing: 7px;*/ background-color: yellow; } 그래, 이런 느낌을 원..
![]()
나름 10분 고민해서 만든 내 간지나는 로고 이미지를 야심차게 넣었건만 난 이 로고를 가운데에 배치하고 싶다. 이미지를 가운데로 정렬하고 싶으면 display 속성을 사용하면 된다. 1. display 속성 사용 display의 블록레벨 속성을 사용하고 margin을 auto값으로 지정해주면 이미지가 가운데로 정렬됨 .main_logo{ display: block; margin: auto; } 쫘좐 display 속성에 block 요소를 넣어주면 언제나 새로운 line에서 시작한다. 대표적으로 , 등이 있음 쉽게 말하면 웹페이지 기준 가로 한 줄을 모두 차지하게 되는 것이다.
![]()
미디어쿼리는 아직 반영을 못했다. 그러나 ! 미래의 내가 중구난방이라고 욕할지언정 menu 상단바를 완성했다. 저 멋없는 skyblue와 yellow 색상은 단지 각자의 영역을 표시하기 위한 수단일뿐, 절대 최종 색상이 아니다. Simple is best 하얀색으로 background-color를 다시 재정비 해줄 것이다. 아니 darkgray랑 gray랑 색상이 차이가 나는데 darkgray보다 gray가 색상이 더 진하게 표현된다. 뭐지? [기능 구현] 0. css 파일 쪼개기 기능 구현은 아니지만스리.. 쪼개고 싶었던 css 파일을 3개로 쪼갰다. animation.css / default.css / mainpage.css animation.css : 맨 상단 추가할 텍스트가 서서히 보여지는 효과를..
![]()
나.. 나도 검색창 옆에 돋보기 만들고 싶어 !!! 돋보기 아이콘 추가하고 싶어 !! search 창은 나름 간지나게 생성하였으나, 문제는 검색창 옆에 돋보기 아이콘을 추가하고 싶은 욕심이 생겼다는 것이다. 그 욕망을 실현시키기 위해 fontawesome 아이콘을 이용하겠다. 1. 해당 코드 영역에 삽입 html 파일 중 영역에 위의 코드를 삽입하자 2. fontawesome 사이트 접속 후 search 아이콘 페이지 접속 https://fontawesome.com/v4/icon/search fa-search: Font Awesome Icons Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets y..
태그에는 링크를 직접 삽입할 수 있는 href 속성만 오면 되지, rel 속성은 또 뭐람? 라고 생각할 나같은 사람들을 위하여 태그는 링크를 정의할 수 있고, href 속성은 직접 링크의 주소를 삽입할 수 있다. 근데 보통 link 태그를 사용할 때 href 속성 앞에 오는 rel은 도대체 뭘까? 보통 이런 형식으로 쓰인다. rel 속성 : 현재 문서와 href의 주소와의 관계 설명 -> 반드시 명시되어야 하는 필수 속성 href의 링크가 무엇이냐에 따라서 rel에 들어갈 속성값이 달라진다. alternate 프린트 페이지나 번역된 페이지와 같이 해당 문서의 대체 버전에 대한 링크를 제공함. author 해당 문서의 저자에 대한 링크를 제공함. dns-prefetch 브라우저가 대상 리소스의 원본에 대해..
![]()
, , 모두 단락을 나누는 태그들인데 정확하게 어떨 때 쓰이는지 정리해두고 싶어서 작성함 가장 정리가 잘 된 글이라고 생각해서 아래의 링크를 토대로 정리할 것임 더보기 https://dasima.xyz/div-vs-span-vs-p-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%B8%94%EB%A1%9D-%EC%9A%94%EC%86%8C%EC%99%80-%ED%8F%AC%ED%95%A8-%EC%9C%A0%EB%AC%B4/ div vs span vs p 차이는 블록 요소와 포함 유무 - dasima div vs span vs p 태그 차이점은 무엇일까요? 블록 요소와 인라인 요소의 차이점이 있습니다. 여기서 파생되어 서로 포함할 수 있는 경우의 수가 정해져 있습니다. 같은 블록 요소인 div, ..
![]()
불쌍한 너구리들을 위한 짝퉁 인조 가죽을 판매하는 회사의 소개 웹페이지 중 메인 페이지를 생성하였다. ▪️ 참고 강의 링크 더보기 https://www.youtube.com/watch?v=MjmUpXhaqRM&list=PLYNmD6nHXpCZ6d-UAVRxWSvK8WOPMxXeA 원래 총알오징어 판매 회사 소개 웹페이지인데 너구리로 바꿨다가 SERVICE 부분에는 내용 수정하기 귀찮아서 그냥 오징어 service 문구로 둠 디자인적인 면에서는 잘 모르겠는데 뭔가 바꾸고 싶은 것들이 스멀스멀 생각이 나서 복습하면서 변형시켜볼 계획이다. 1. HTML 1-1) 코드 주석 강의를 들으면서 따라 코딩한거라 주석이 없다. 내가 미리 만들어져있는 코드를 분석하는 다른 개발자라고 생각해서 이 코드를 봤을 때 어느 부..
![]()
대체 height랑 line-height의 차이점이 뭐길래 둘이 동시에 쓰이는거지? 같은 높이 주제에 궁금해서 찾아봤다. 내가 이런 형태의 결과물을 만들어야 한다. HTML CONTACT 우리에게 파트너십을 신청하거나, 최고의 고객이 되어주세요 더 알아보기 CSS .more2{ width: 220px; height: 40px; border: 1px solid white; line-height: 40px; cursor: pointer; margin: 16px auto; } 이것이 해당 영역의 원본 코드이다. 그런데 문득 그런 생각이 들었다. height로 그냥 글자의 높낮이를 조절하면 안되는건가? height와 line-height의 결과물이 다르게 발생하는가? 도대체 왜 height와 line-heigh..
![]()
간단한 사이트를 만드는 중에 언제까지 html 형식으로 사이트 확인할거야 ..! Github 사용법을 배우긴 해야 하는데 이건 일단 급한 불부터 끄고 난 다음 배울 예정이라 (약 2주 뒤) 지금 당장 필요한 부분만 구글링했다. 생활코딩 WEB 강의를 들었을 때 깃허브에서 웹호스팅을 할 수 있다는 방법을 듣고 Netlify로 호스팅해도 되지만 기왕 한거, 깃허브로도 해보겠다. 잔디를 채우고 싶은 내 검은 욕망 1. Github 로그인 및 웹 호스팅 예정인 html 관련 파일을 Repository에 집어넣기 2. 상단의 Setting 클릭 3. 좌측 page 클릭 4. Branch 아래 첫번째 선택지에 main으로 변경 후 save save를 누른 즉시 아래와 같은 안내 문구가 나온다. 5. 다시 page ..
![]()
노란색 영역의 글씨와 파란색 영역의 글씨 사이 간격을 주고 싶은데 이때 margin-bottom 값을 줘야 하는지 padding-bottom 값을 줘야 하는지 헷갈림 대체 margin과 padding의 차이가 뭔데 객체의 내부 여백이 padding이고 외부 여백이 margin인건 알겠고 object, padding, margin까지 그리라면 그릴 수 있는데 근데 어떨 때 margin을 쓰고 padding을 쓰는지가 헷갈린다. margin : border 바깥쪽 영역 차지, 주변 요소와 거리감을 주기 위함 padding : border 안쪽 영역 차지, padding 값으로 인해 컨텐츠 영역에 영향을 미칠 수 있음 (content의 연장 개념) * margin만 적용 가능 1. 음수값 2. auto 1. ..
어그로 죄송 github에서는 target = "_blank" 부분은 HTML, Markup 코드 모두 작동하지 않는다. 링크 작동이라고 해봤자 기존 페이지에서 링크로 넘어가는 기능밖에는 구현되지 않는다. 개인적으로 blank 기능 미만 잡이라고 생각하는데 해당 기능이 없어서 극대노 하였으나 아메리카노 마시고 진정이 되었다. 누가 깃허브 target blank 기능 좀 개발해주세요 ▶HTML) 링크 새탭 열기 더보기 ▶Markup) 링크 새탭 열기 더보기 [링크 설명 TXT] (링크 주소) {: target="_blank"}
![]()
내가 가진 data의 datetime column은 날짜와 시간이 같이 들어가있다. 아직은 day & time을 한번에 인식하고 정렬해주는 기능을 찾지 못했기 때문에 (없을 확률이 더 큼 ㅠㅋㅋ) 날짜 따로, 시간 따로 col을 분리해줄 것이다. 일단 csv 파일을 불러올 때 parse_dates를 이용해서 datetime을 날짜로 불러온다. bike_data_2011_2012["date"] = [d.date() for d in bike_data_2011_2012['datetime']] bike_data_2011_2012["time"] = [d.time() for d in bike_data_2011_2012['datetime']] 위 코드를 입력한 후, head()로 보면 짠 ! 맨 우측 date, ti..
