깡패토끼 — 깡패토끼

2022.10.29·[Language]/VIEW

육안으로는 두 문단의 news 너비가 같아 보일 수 있겠지만 실제로 두 문간의 너비는 약간의 차이가 있다. crome browser 너비가 좌우 margin 30px 포함해서 총 733px을 기준으로 했을 때, background-color : yellow; 인 .news_content_1은 width : 319.203px이고 background-color : skyblue; 인 .news_content_2는 width : 353.797px이다. 병렬로 연결된 이 두 문단의 width 값은 34.594px 차이가 난다. 난 이 두 문단의 너비값을 동일하게 만들고 싶다 ! 브라우저 창을 늘리고 줄였을 때도 너비가 동일한 값으로 서로 자동으로 조정되게 만들고 싶다. 그래서 width값을 콕 찝어 몇 px로 ..

[CSS] 텍스트 밑줄 간격 띄우기 (text-decoration-underline)

2022.10.28·[Language]/VIEW

의사양반 저게 대체 뭐란 말인고 .career > ul > li> div > h1{ font-size: 60px; text-decoration: 1px underline; } 밑줄을 긋고 싶은데 저렇게 되는게 어디있단 말잉가 text-underline-position: under; 위 코드 하나 슥 넣어주면 게임 끝 .career > ul > li> div > h1{ font-size: 60px; text-decoration: 1px underline; text-underline-position: under; } 쫘좐

[SH FILM/CSS] background - image border

2022.10.26·[Language]/VIEW

저렇게 딱 떨어지는 배경 이미지는 너무 안예쁘다. 이미지 모서리 가장자리가 둥글게 표현되었으면 좋겠는디 그냥 태그로 넣은 그림은 border-radius: 30px; 이런 식으로 주면 되는데 background-image는 뭔가 다르려나? 하고 찾아봄 응 아니야 똑같아 .career{ background-image: url(../img/main_intro_function_back.png); background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 30px; color: white; } border-radius: 30px; 이 코드를 추가해주면 모서리 둥글둥글 빔 효과를 줄 수 있다. 쫘좐

[SH FILM/CSS] background - img 사이즈 조절

2022.10.26·[Language]/VIEW

으아니... 이게 원래 이런 사진이 아닌디... html 파일에서 태그 내 집어넣은 이미지가 아니라 css 파일에서 background-image로 집어넣은 이미지라 보통 width, height로는 이미지 크기가 조절이 안된다. 그럼 뭘로 해야하는디 를 알아볼 것이다. 1. background-repeat: no-repeat; background-repeat: no-repeat; 해당 속성을 일단 넣어주자. 왜냐? 나는 background-image 부분에서 나타났으면 하는 이미지는 하나면 충분하니께 ! 저 코드 안넣어주면 배경 이미지가 무한 반복됨 2. background-size background-size: 100px; /* 이미지 크기 고정 */ background-size: 100%; /* 이..

[SH FILM/CSS] ul 점, 들여쓰기 없애기

2022.10.26·[Language]/VIEW

떼잉 신경쓰인다 저 왼쪽에 붙어있는 아주 멋없는 똥골뱅이 그리고 제멋대로 들여쓰기 되어 있는 것도 심히 불 - 편 그 자체 참고로 ul 은 순서 없는 리스트, ol은 순서 있는 리스트라서 똥글뱅이가 아니라 li 안 내용들이 1. 2. 3. 이런 식으로 표현된다. .career > ul{ list-style: none; padding-left: 0px; } list-style: none; 으로 똥글뱅이들 섬멸해주고, padding-left: 0px; 으로 들여쓰기 또한 혼내주었다. 편 - 안

[SH FILM/CSS] (*) 전체 선택자 예외 처리

2022.10.26·[Language]/VIEW

*{ font-family: 'Song Myung', serif; color: gray; } 보이는가 css 파일에서 전체 선택자 - 회색 글씨로 지정해놓는 바람에 잘 안보이는 CAREER 회색 글씨가.. 나는 잘 안보인다. 양쪽 시력 1.5인 맑은 눈의 몽골인 수준이지만 너무 답답해서 당장 글씨 색상을 white로 바꾸고 싶은데 * :not(.career){ font-family: 'Song Myung', serif; color: gray; } 해당 코드가 말을 듣지 않는다. 띄어쓰기가 문제였다는 글을 발견, 밥풀같은 희망을 품고 띄어쓰기를 고쳤지만 *:not(.career){ font-family: 'Song Myung', serif; color: gray; } 광광 울며 실패.. 대체 뭐가 문제야 ..

[SH FILM/CSS] (@keyframe - fade in left/right) 글자 옆에서 나타내기 애니메이션

2022.10.26·[Language]/VIEW

좌측에서 우측으로, 우측에서 좌측으로 이렇게 나타내는 애니메이션은 @keyframe - fade in 애니메이션을 이용해서 만들 수 있는데 transform 값이 들어간다. 1. 좌측 -> 우측 @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translateZ(0); } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translateZ(0); } } /* mainpage : app_main_intr..

[SH FILM] Failed to load resource: the server responded with a status of 404()

2022.10.24·[Language]/VIEW

나한테 왜 이러는 건데 대체 뭐가 그렇게 불만인데 깃허브에 img파일과 css, html 파일을 다시 재업로드했지만 저 에러는 사라지지 않았다. 경로 문제인가 싶었는데 경로는 잘 작성되어 있었음. 1. head 태그에 w3 링크 추가 profile 링크 부분을 head 태그에 추가해줬더니 잘만 됨 아악 킹받아 이게 뭐지 싶어서 들어가봤더니 왜 이 태그를 이용해서 해결됐는지, 이 사이트가 대체 뭐길래 !! 대체 경로가 잘 설정되었음에도 불구하고 저 태그를 추가하지 않은 웹페이지는 저런 404 에러가 뜨는건지 궁금한데 구글링해보았더니 지금의 나로서는 찾을 수 없어서 디스코드 스터디 채팅방에서 질문을 해봤다. 근데 답은 아직 없음 궁금한디 일주일 뒤 지식인에다 올려봐야지 광기 내가 어떻게든 찾고만다 (+) 만..

[SH FILM/CSS] margin 병합

2022.10.23·[Language]/VIEW

ㅇㄴ 마진 병합 현상이 존재한다는 것을 까먹었고 있었다. 오엠쥐 내가 하고 싶은 것은 main photo와 SH FILM 어플 소개 영역을 서로 떨어뜨려 놓는 것. 원래 떨어진 거리보다 더 멀리 떨어뜨려 놓고 싶다. 그래서 기존 30px 떨어져 있는 거리에서 20px정도 더 떨어뜨려볼까 싶어서 SH FILM 어플 소개 영역의 class인 .intro_app의 margin-top 값을 20px정도 주었는데 갑자기 마진 병합 현상이 일어나게 되었다. 감히 내 앞길을 막다니 당장 해결해주지 [원인] 인접 블록 요소끼리 상하단이 인접에 있을 때 발생 [해결] .intro_app의 display 속성을 inline-block으로 해주었다. 기존 .main_photo{ margin: 30px auto; displa..

[SH FILM] Main photo 초안 ~ 전체 뼈대 구상

2022.10.22·[Etc]

Main photo 초안까지는 완성했고 기왕 하는 김에 전체적인 구역을 나누어 footer까지 간단한 내용과 구성을 구상하였다. 생각보다 해놓은건 없는데 시간이 좀 걸렸다. 아직 초보라 그래.. 그래도 다섯시간동안 카페에서 이거 만들면서 진짜 뽝 집중했다. 뭔가 집가면서도 아쉬웠음 [구현한 기능] 0. 전체적인 뼈대 구상 구현한 기능은 아니지만 전체적인 뼈대를 구상했다. 스노우 어플 웹페이지를 좀 많이 참고한 것 같다. 그리고 기왕이면 예쁜게 좋아서 계속 디자인도 같이 고민하고 있다. 먼저 크게 ' header 영역 / main 영역 / footer 영역 ' 3가지 영역으로 나누었다. -header 영역 메뉴바, search창, 메인 로고, 서브 텍스트, 메인 포토 -main 영역 SH FILM 소개, ..

[SH FILM/CSS] (@keyframe - fade in) 글자 나타내기 애니메이션

2022.10.22·[Language]/VIEW

SH 로고 밑 서브 텍스트가 고정되어 있어서 너무 심심해보임 뭔가 페이지에 처음 접속했을 때 저 서브 텍스트가 서서히 나타났으면 좋겠다. animation.css 파일에 해당 코드를 집어 넣을 건데, animation 효과는 재탕할 예정이므로 class 이름을 fadeIn으로 지정해주겠다. 1. @keyframes (+ @-webkit-keyframes) keyframes을 이용해 opacity값을 설정해주어 fadeIn 효과를 지정해주겠다. opacity값이 0이면 텍스트가 보이지 않는다고 생각하면 되고, 값이 1이면 텍스트가 나타나는 것이라고 생각하면 된다. 일단 난 크롬 브라우저를 이용하고 있으므로 webkit keyframes를 추가로 지정해주겠다. 다른 브라우저를 위한 키프레임은 나중에 추가하도..

[SH FILM/CSS] 이미지 크기 자동 조절

2022.10.22·[Language]/VIEW

이미지 크기 머선일이구 ... 저렇게 웹페이지 화면을 꽉 채우는 것으로 모자라서 도대체 어떤 사진인지 감이 안 올 정도일 때는 브라우저 창에 맞게 이미지 조절해야 한다. 브라우저 창이 작으면 width와 height가 자동으로 조절되게끔 하고, 브라우저 창이 커져도 사진이 그 브라우저 창에 맞춰가는 코드를 알아보겠다. 1. display : block display를 block값으로 설정해줘야 함. 2. max-widht : 100% 브라우저 창의 최대 크기에 사진의 width를 100%로 크기를 조절하게끔 코드를 넣어준다. height도 auto로 맞춰주자. 위 두 코드를 이미지 class에 넣어주면 완성 ~! 서브 글자와 이미지 간의 간격이 좀 있으면 좋겠어서 margin-top을 30px을 추가로 ..

전체 글

티스토리툴바