![]()
의사양반 저게 대체 뭐란 말인고 .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; } 쫘좐
![]()
저렇게 딱 떨어지는 배경 이미지는 너무 안예쁘다. 이미지 모서리 가장자리가 둥글게 표현되었으면 좋겠는디 그냥 태그로 넣은 그림은 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; 이 코드를 추가해주면 모서리 둥글둥글 빔 효과를 줄 수 있다. 쫘좐
![]()
으아니... 이게 원래 이런 사진이 아닌디... 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%; /* 이..
![]()
떼잉 신경쓰인다 저 왼쪽에 붙어있는 아주 멋없는 똥골뱅이 그리고 제멋대로 들여쓰기 되어 있는 것도 심히 불 - 편 그 자체 참고로 ul 은 순서 없는 리스트, ol은 순서 있는 리스트라서 똥글뱅이가 아니라 li 안 내용들이 1. 2. 3. 이런 식으로 표현된다. .career > ul{ list-style: none; padding-left: 0px; } list-style: none; 으로 똥글뱅이들 섬멸해주고, padding-left: 0px; 으로 들여쓰기 또한 혼내주었다. 편 - 안
![]()
*{ 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; } 광광 울며 실패.. 대체 뭐가 문제야 ..
![]()
좌측에서 우측으로, 우측에서 좌측으로 이렇게 나타내는 애니메이션은 @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..
![]()
나한테 왜 이러는 건데 대체 뭐가 그렇게 불만인데 깃허브에 img파일과 css, html 파일을 다시 재업로드했지만 저 에러는 사라지지 않았다. 경로 문제인가 싶었는데 경로는 잘 작성되어 있었음. 1. head 태그에 w3 링크 추가 profile 링크 부분을 head 태그에 추가해줬더니 잘만 됨 아악 킹받아 이게 뭐지 싶어서 들어가봤더니 왜 이 태그를 이용해서 해결됐는지, 이 사이트가 대체 뭐길래 !! 대체 경로가 잘 설정되었음에도 불구하고 저 태그를 추가하지 않은 웹페이지는 저런 404 에러가 뜨는건지 궁금한데 구글링해보았더니 지금의 나로서는 찾을 수 없어서 디스코드 스터디 채팅방에서 질문을 해봤다. 근데 답은 아직 없음 궁금한디 일주일 뒤 지식인에다 올려봐야지 광기 내가 어떻게든 찾고만다 (+) 만..
![]()
ㅇㄴ 마진 병합 현상이 존재한다는 것을 까먹었고 있었다. 오엠쥐 내가 하고 싶은 것은 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 로고 밑 서브 텍스트가 고정되어 있어서 너무 심심해보임 뭔가 페이지에 처음 접속했을 때 저 서브 텍스트가 서서히 나타났으면 좋겠다. animation.css 파일에 해당 코드를 집어 넣을 건데, animation 효과는 재탕할 예정이므로 class 이름을 fadeIn으로 지정해주겠다. 1. @keyframes (+ @-webkit-keyframes) keyframes을 이용해 opacity값을 설정해주어 fadeIn 효과를 지정해주겠다. opacity값이 0이면 텍스트가 보이지 않는다고 생각하면 되고, 값이 1이면 텍스트가 나타나는 것이라고 생각하면 된다. 일단 난 크롬 브라우저를 이용하고 있으므로 webkit keyframes를 추가로 지정해주겠다. 다른 브라우저를 위한 키프레임은 나중에 추가하도..
![]()
이미지 크기 머선일이구 ... 저렇게 웹페이지 화면을 꽉 채우는 것으로 모자라서 도대체 어떤 사진인지 감이 안 올 정도일 때는 브라우저 창에 맞게 이미지 조절해야 한다. 브라우저 창이 작으면 width와 height가 자동으로 조절되게끔 하고, 브라우저 창이 커져도 사진이 그 브라우저 창에 맞춰가는 코드를 알아보겠다. 1. display : block display를 block값으로 설정해줘야 함. 2. max-widht : 100% 브라우저 창의 최대 크기에 사진의 width를 100%로 크기를 조절하게끔 코드를 넣어준다. height도 auto로 맞춰주자. 위 두 코드를 이미지 class에 넣어주면 완성 ~! 서브 글자와 이미지 간의 간격이 좀 있으면 좋겠어서 margin-top을 30px을 추가로 ..
![]()
흠 인스타 감성처럼 로고 밑 글자의 간격을 좀 떨어뜨려 놓고 싶다. 사실 저 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에서 시작한다. 대표적으로 , 등이 있음 쉽게 말하면 웹페이지 기준 가로 한 줄을 모두 차지하게 되는 것이다.
