• 목록
  • 아래로
  • 위로
  • 7
  • GsusWeb
  • 조회 수 72
html{
font-size: 16px;
}

body{
font-family: 'Chivo', sans-serif;
margin-left: 50px;
margin-right: 50px;
margin-top: 0;
margin-bottom: 50px;
padding: 0;
font-size: 16px;
}





.container_wrapper{
width:auto;
align-content: center;
}

.header_Pack{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  border-width:  thin;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-style: solid;
  border-color: #D8D8D8;

  height: 20px;
  padding: 1rem;
  padding-bottom: 32px;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

#nav .nav_list{
  margin: 0;
  padding: 0;
  padding-top: 40px;
  padding-left: 15%;
  word-spacing: 16px;
  width: 740px;

}

#nav .nav_list span{
  text-align: center;
}


#nav .nav_list a{
  text-decoration: none;
  color: #696969;
  font-size: 1.3rem;
  font-weight: bold;
  float:left;
  width: 12%;
}

#nav .nav_list a:hover  {
  color: #333333;
}



.title_description{
display: inline;
color:gray;

}

#title_description{
  margin: 25px 0 0 0;
  padding: 0;
  padding-left: 2px;
  font-size: 0.01rem;

}


.title{
  margin:0;
  padding: 0;


}

.title a{
  text-decoration: none;
  color: #333333;
  float: left;
  width: 130px;
}

h2 {
  margin: 0;
  padding: 0;
}

p {
  margin: 25%;
}

.slogan{
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.5rem;
  color: #2E2E2E;
}

.slogan a{
  text-decoration: none;
  color: #2E2E2E;
}



hr {
position: relative;
border: none;
height: 0.6px;
background: #2E2E2E;
border-color: #2E2E2E;
margin: 0;

}

#worship_title_ONE {
text-align: center;
}

#worship_title_ONE a {
  font-weight: bold;
  color: #0e4d88;
  text-decoration: none;
  font-size: 1.7rem;
}

/*<시작> 인터넷에서 따온 코드 <시작>*/
.outer {

  width: 650px;
  margin: auto;
  display: block;
  /* set the font color here as a background color, in this case black
  background-color: black; */

}

.bg {
  text-align: center;
  width: 0%;
  transition: all 0.4s ease-out;
  background: #3ebac6 background: -moz-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #3ebac6), color-stop(50%, #8b539e), color-stop(100%, #e53782));
  background: -webkit-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: -o-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: -ms-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: linear-gradient(to right, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3ebac6', endColorstr='#e53782', GradientType=1);
}

.inner {
  display: inline-block;
  background-color: white;
  mix-blend-mode: screen;
  padding: 15px;
  width: 640px;
}

h1 {
  color: black;
  letter-spacing: 5px;
}

.outer:hover .bg {
  width: 100%;
}


/*<끝> 인터넷에서 따온 코드 <끝> */



#worship_title_ONE > .outer > .bg > .inner > h2 > a {
font-size: 2.5rem;
}

#worship_time {
text-align: center;
margin-bottom: 20px;
}

.worship_program a{
text-decoration: none;
color: #201F1F;

}

.first_worship{
border-style: solid;
display: inline-block;
background-color: #0e4d88;
border-color: #0e4d88;
border-radius: 14px;
border-width: 10px;
margin:8px;
}

.second_worship{
border-style: solid;
display: inline-block;
background-color: #0e4d88;
border-color: #0e4d88;
border-radius: 14px;
border-width: 10px;
margin:8px;
}

.third_worship{
border-style: solid;
display: inline-block;
background-color: #0e4d88;
border-color: #0e4d88;
border-radius: 14px;
border-width: 10px;
margin:8px;
}

.time {
  font-size: 0.6rem;
  color: white;
  display: inline;
  vertical-align: bottom;
}

.worship_name{
  font-size: 0.9rem;
  color: white;
}

.youtube_intro{
  text-align: center;
  line-height: 20px;
  font-size: 1.5rem;
  color: #2E2E2E;
  width:100%;
}

.youtube_description{

}


.Youtube_AlphaOmega{
  font-weight: bold;
  border-style:  solid;
  border-radius: 5px;
  border-color: green;
  display: inline;
  border-width: 3px;
  padding: 2px;
}

.You{
color : #1D1D1D;
display: inline;
font-weight: 900;
font-size: 1.7rem;

}

.tube{
  border-style: solid;
  border-radius: 5px;
  border-color: red;
  border-width: 3px;
  display: inline;
  padding: 1px;
  color : white;
  background-color: red;
  font-weight: bold;

}



.logos{
font-family: inherit;
text-align: center;
font-size: 1rem;
color: #2E2E2E;
line-height: 16px;
}

.logos_chapter{
  margin: 0;
  margin-top: 16px;
  padding: 0;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
  color: #2E2E2E;
}

.book_intro {
text-align: center;
font-size: 1.7rem;
}

.book_intro a {
color: #3c899c;
text-decoration: none;
}

.youtube_description a{
  color: #2E2E2E;
  text-decoration: none;
}

.support_mission {
text-align: center;
font-size: 1.7rem;
}

.support_mission a{
text-decoration: none;
color: #2E2E2E;
}


안녕하세요. 처음 적는 글인데, 도움 글이네요. (왜 css 코드가 제일 위로 간 건지... 마지막에 추가했는데) 

 

전공도 아니고, 코딩은 전혀 모르던 상황에서 생활코딩보고 따라하다 여기까지 온지 30일 됐습니다.

 

병원 입원중이라 간간히 하고 있는데, 같은 코드가 크롬과 사파리에서 다르게 동작합니다. 

 

크롬은 제가 기대했던 결과 그대로 보여주고 있는데, 사파리는 그렇지 않네요.

 

아래는 크롬의 결과입니다.

 

스크린샷 2020-06-18 오전 9.36.14.png.jpg

 

문자가 있고, 그 위 마우스를 올려 놓으면 아래처럼 색이 입혀지는 코드를 억지로 끼워맞췄습니다. (인터넷에서 긁어와서요..)

 

 

 

 

스크린샷 2020-06-18 오전 9.39.30.png.jpg

아래는 사파리의 결과입니다. 

 

애초에 글자가 보이지 않습니다만, 글자가 있어 보이는 곳을 더듬 듯 근처에 마우스를 올려놓으면 

 

위 사진처럼 글자에 색이 입혀지긴 합니다. 

 

스크린샷 2020-06-18 오전 9.35.54.png.jpg

 

 

문제는 크롬에서처럼 처음 텍스트가 보이지 않는다는 문제가 있네요. 

 

제일 위는 CSS 코드이고, 제일 아래는 HTML 코드입니다. 

보시기 불편하실텐데.. 삭제나 수정하는 방법을 모르겠네요

 

문제가 z-index 같은 우선순위의 개념일까 싶은데, 

잘 모르겠어서 도움 부탁드립니다. 

 

호스팅 알아보다 들어온 신입회원입니다. 

 

잘 부탁드려요.^^

 

 

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <link href="https://fonts.googleapis.com/css2?family=Chivo&display=swap" rel="stylesheet">
  <title></title>
</head>

<body>


  <p>
    <div class="support_mission">
      <div class="outer">
        <div class="bg">
          <div class="inner">
            <h2>
              <a href="index.html?id=mission">
                섬기는 교역지
            </h2>
          </div>
        </div>
      </div>
    </div>

    </p>
</body>

</html>

 

 

 

작성자
GsusWeb 44 Lv. (55%) 158840/162000EXP

초행길 방랑자에겐 오아시스 같은 곳이네요.

 

댓글 7

마당쇠15
profile image

css 텍스트 이펙트 중에 사파리 혹은 ie 에서 먹지 않는 경우가 있으니 그 부분 확인해 보셔야 할듯 ( ͡° ͜ʖ ͡°)

comment menu
2020.06.18. 13:24

신고

"마당쇠15님의 댓글"

이 댓글을 신고 하시겠습니까?

GsusWeb 작성자 → 마당쇠15
헉, 충격이 큰 '헉' 입니다. ㅠ
색이 입혀지는 기능이 유일한 기능(?)이었는데..
초보라 페이지 기능보다 외관에 정신이 팔렸네요.
무심하게 삭제해버릴까요.
아니면 무난히 같은 기능을 구현할 다른 방법을 알고 계시다면
'운'만 띄워주세요. 어떻게든 찾아볼게요!

그리고 관심 감사합니다.
comment menu
2020.06.18. 17:56

신고

"GsusWeb님의 댓글"

이 댓글을 신고 하시겠습니까?

NoYeah
profile image
퍼온소스가 웹 표준이 아닌것 같네요.
그래서 브라우저마다 다른 결과값이 나올겁니다.

사이트 주소를 알려주시면 이렇게 소스 코드를 남기는 것 보다 훨씬 빠르게 문제 해결을 하실 수 있을겁니다~
comment menu
2020.06.18. 16:49

신고

"NoYeah님의 댓글"

이 댓글을 신고 하시겠습니까?

GsusWeb 작성자 → NoYeah
그랬군요. 웹 표준.. 역시 어딜가든 기본은 제일 중요하네요.

아직 호스팅도 구하지 못해서 깃헙에 올려두고 겨우 테스트하는 껍데기 페이지 입니다.

https://gsusweb.github.io/Yech_pg/

지금은 겨우 외관만 반응형으로 조금씩 수정중입니다.
기능은 둘째치고 메뉴 하나 만드는데 산 넘어 산이네요.

그래도 오르는 맛이 있습니다. ㅎㅎ
관심 감사합니다.
comment menu
2020.06.18. 17:59

신고

"GsusWeb님의 댓글"

이 댓글을 신고 하시겠습니까?

NoYeah → GsusWeb
profile image
그래서 free responsive template 으로 검색해보시면 많은 웹 페이지 자료가 나오는데 거기서 구조를 천천히 살펴보시면서 제작하는 것을 추천합니다.
comment menu
2020.06.18. 18:04

신고

"NoYeah님의 댓글"

이 댓글을 신고 하시겠습니까?

GsusWeb 작성자 → NoYeah
초행길이라 한 방울의 물에도 해갈을 하네요. 조언 감사합니다.
comment menu
2020.06.18. 18:08

신고

"GsusWeb님의 댓글"

이 댓글을 신고 하시겠습니까?

GsusWeb 작성자 → NoYeah
한 방울이 아니라 오아시스 였네요!
우물 파는 방법을 알려주셔서 감사합니다.
comment menu
2020.06.18. 18:38

신고

"GsusWeb님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 24.02.11.17:21 373
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 4059
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4464
762 극저사양 테스트 서버 구축 OS 및 스포어 호스팅 수정승인대기 13 image Apache 20.06.28.12:03 290
761 오라클 클라우드 프리티어 가입이 안 되네요 ㅠㅠ 20 이니스프리 20.06.26.21:31 4827
760 웹 페이지에서 알 수 없는 공간을 없애고 싶은데.. 5 GsusWeb 20.06.25.14:59 96
759 정전 상태에서 인강을 들어야 되는데요 ㄷㄷ 17 이니스프리 20.06.24.21:51 210
758 호스팅 신청했는데요 도움 좀 부탁드립니다. 24 GsusWeb 20.06.20.21:34 227
757 사이트의 Slow query가 의심되어서 질문 드려요! ^^ 8 이니스프리 20.06.20.14:02 160
756 제 블로그 들어갈 때마다 ERR_CONNECTION_RESET 이 오류가 뜨는데 어째서일까요... 9 MYIG 20.06.19.22:53 399
755 그매햇던것이 라이믹스 에 안올라갑니다. 2 image 핫슈 20.06.19.20:52 72
754 코딩하실 때 어떤 브라우저를 기준으로 하시나요? 9 GsusWeb 20.06.19.17:49 127
753 HTML 과 PHP의 연동? 8 GsusWeb 20.06.19.08:34 168
구글과 사파리의 결과값에 차이가 있습니다. 조언 부탁드려도 될까요? 7 image GsusWeb 20.06.18.09:52 72
751 ls는 됫는대 압축풀기가 안되내요 ㅜㅜ 핫슈 20.06.16.21:15 42
750 퍼티에서 command 뜨면 없다는 것인가요? 2 핫슈 20.06.15.19:55 52
749 FTP 로 라이믹스 업로드 중 전송실패가 많다. 2 핫슈 20.06.14.19:51 74
748 JSP의 장단점에 대해 질문 드립니다. 21 이니스프리 20.06.09.21:42 218
747 오라클 클라우드로 vpn 구축하는 법? 2 joyfuI 20.06.09.15:44 690
746 Chrome와 Safari의 비밀번호 연동이 가능한가요? 10 갱생협스 20.06.06.21:24 126
745 게임 용어에 대해 질문 드립니다 (탱커/딜러/힐러) 21 이니스프리 20.06.05.20:45 2112
744 AWS elastic inference 끄는 법 아세요? 15 image 국내산라이츄 20.06.03.15:21 180
743 핸드폰 유심이 이상해요. 7 슬기 20.06.01.19:18 213