min_chan.log

CSS & HTML 기초(9)

Thu, 28 Mar 2024 09:04:10 GMT

21.포스코건설(반응형, 뉴스룸 말줄임 처리,푸터)

html



  
    
    
    
    
    
    
    
    
    
    
    KRi | 코리아리서치인터내셔널
    
    
    
    
    
    
  
  
    
      본문바로가기
    
    
      
        
          
            kri
          
          
            
              
                회사소개
                
                  회사 개요
                  리더십
                  성장 가치
                  계열사
                
              
              
                서비스라인
                
                  마케팅 리서치
                  퍼블릭 리서치
                  리서치 Tech.
                  DIY/애자일 리서치
                   AI 빅데이터
                  클라이언트
                
              
              
                콘텐츠라이브러리
                
                  리서치 콘텐츠
                  뉴스/미디어룸
                  커뮤니티
                
              
              
                문의하기
                
                  조사 문의
                  오시는 길
                
              
              
                채용
                
                  회사 문화
                  직무 소개
                  채용 안내
                
              
            
          
          
            
              KOR
              ENG
            
            조사문의
            
            
              메뉴열기
              
              
              
              
            
          
        
        
        
          
          
            
              회사소개
              
                회사 개요
                리더십
                성장 가치
                계열사
              
            
            
              서비스라인
              
                마케팅 리서치
                퍼블릭 리서치
                리서치 Tech.
                DIY/애자일 리서치
                 AI 빅데이터
                클라이언트
              
            
            
              콘텐츠라이브러리
              
                리서치 콘텐츠
                뉴스/미디어룸
                커뮤니티
              
            
            
              문의하기
              
                조사 문의
                오시는 길
              
            
            
              채용
              
                회사 문화
                직무 소개
                채용 안내
              
            
          
        
      
      
        
          메인비디오

css

/* 컬러 변수 */
:root {
  --point-color1: #F8C900;
  --point-color2: #907354;
  --txt-color-400: #8F98AC;
  --txt-color-500: #77797E;
  --txt-color-600: #212121;
}

#wrap {
  height: 3500px;
}

#header {
  position: fixed;
  left:0;
  top:0;
  width:100%;
  z-index: 9999;
}
#header .inner {
  /* 1920은 일반적으로 안적어도되지만 큰모니터에서 좌우가 너무 넓어지는것을 방지해줌 */
  max-width:1920px;
  /* 테블릿 여백 미리줘서 창 줄었을때 안붙게 */
  padding:0 20px;
  height: 100px;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header .logo {
  width:146px;
  /* 제자리띄우기 */
  position: relative;
  z-index: 10;
}
#header .logo a {
  display: block;
  height: 35px;
  background: url(../images/logo_w.svg) no-repeat left top / 100%;
}

/* 헤더기준 가운데 정렬 */
#header .gnb_wrap {
  position: absolute;
  left:0;
  top:0;
  /* 서브메뉴의 기준이므로 100%로 늘려야 서브를 늘릴수있음 */
  width:100%;
  /* gnb 가운데 정렬 */
  display: flex;
  justify-content: center;
}
#header .gnb {
  display:flex;
}
#header .gnb>li {
  padding:0 45px;
}
#header .gnb>li>a {
  color:#fff;
  display: block;
  line-height: 100px;
  font-size: 18px;
  position: relative;
}
#header .gnb>li>a::after {
  content: '';
  position: absolute;
  left:50%;
  bottom: -12px;
  /* scale효과가 있으므로 transform대신 마진으로 중앙정렬 */
  margin-left:-12px;
  width:24px;
  height: 24px;
  background: url(../images/on.png) no-repeat left top / 100%;
  transition: all 0.5s;
  /* 크기를 0%로 안보이게 */
  transform:scale(0);
  z-index: 10;
}
#header .gnb>li:hover>a::after {
  /* transform 기준은 요소의 중심 */
  transform: scale(1);
}

#header .gnb>li:hover .depth2 {
  /* flex로 보여줌 */
  display: flex;
}
#header .gnb .depth2 {
  position: absolute;
  left:0;
  top:100px;
  width:100%;
  height: 100px;
  justify-content: center;
  align-items: center;
  background: #F9F9F9;
  gap: 0 50px;
  display: none;
}
#header .gnb .depth2 a {
  transition: all 0.3s;
  color:rgba(0,0,0,0.5);
  font-weight: 500;
}
#header .gnb .depth2 a:hover {
  color:rgba(0,0,0,1);
}


#header .lang_wrap {
  /* 제자리띄우기 */
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap:0 50px;
}
#header .lang {
  display: flex;
}

/* 메뉴사이 구분선은 글자보다 높이가 작은경우가 많으므로 before로 띄워서 처리 */
#header .lang li + li {
  margin-left: 15px;
  padding-left: 15px;
  position: relative;
}
#header .lang li + li::before {
  content: '';
  position: absolute;
  left:0;
  top:4px;
  width:1px;
  height: 12px;
  background: #fff;
}
#header .lang a {
  color:rgba(255,255,255,0.3);
}
#header .lang li.active a {
  color:#fff;
  position: relative;
}
#header .lang li.active a::before {
  content: '';
  position: absolute;
  left:50%;
  top:-10px;
  transform: translateX(-50%);
  width:6px;
  height: 6px;
  background: #fff;
  /* 정원 */
  border-radius: 50%;
}
#header .inquiry_btn {
  height: 50px;
  color:#fff;
  border-color:#fff;
  border-radius: 25px;
  width:148px;
  font-size: 18px;
  font-weight: 500;
  gap:0 10px;
}

/* flex아이템이므로 블럭임 */
#header .inquiry_btn::after {
  content: '';
  width:22px;
  height: 21px;
  -webkit-mask: url(../images/power_icon.svg) no-repeat left top / 100%;
  mask: url(../images/power_icon.svg) no-repeat left top / 100%;
  background: #ffcc00;
  transform: rotateZ(-135deg);
  transition: all 0.5s;
}
#header .inquiry_btn:hover {
  background: #333;
  border-color:#333;
}
#header .inquiry_btn:hover::after {
  background: #fff;
  transform: rotateZ(0);
}

/* 모바일메뉴버튼 */
#header .open_btn {
  display: none;
}
/* 모바일 메뉴 */
#header .m_gnb_wrap {
  display: none;
}



.main_slider {
  height: 1000px;
  position: relative;
}
.main_slider video {
  /* background-size: cover 기능을 html요소에 적용 */
  width:100%;
  height: 100%;
  object-fit: cover;
}
.main_slider .slider_bottom {
  position: absolute;
  left:0;
  bottom: 0;
  width:100%;
}
.main_slider .slider_bottom img {
  width:100%;
}


/* 헤더 분기점 */
@media (max-width:1550px) {
  #header .gnb>li {
    padding:0 25px;
  }
  #header .gnb>li>a {
    font-size: 16px;
  }
  #header .lang_wrap {
    gap:0 20px;
  }
}



/* 테블릿 분기점 */
@media (max-width:1200px) {
  #header .inner {
    height: 80px;
  }
  #header .logo {
    width:127px;
  }
  #header .logo a {
    height: 30px;
  }
  #header .gnb_wrap {
    display: none;
  }

  #header .open_btn {
    width:26px;
    height: 26px;
    display: flex;
    flex-wrap: wrap;
    gap:2px;
  }
  #header .open_btn i {
    width:12px;
    height: 12px;
    background: #fff;
  }

  #header .m_gnb_wrap {
    /* transform: translateX(100%); */
    display: block;
    position: fixed;
    right:0;
    top:0;
    z-index: 20;
    width:320px;
    /* fixed는 창기준이므로 height 100%가능 */
    height: 100%;
    background: #fff;
    /* 스크롤 */
    /* overflow: auto; */
    /* 세로스크롤영역 강제로 만들기 */
    overflow-y:scroll;
    padding:140px 0 60px 50px;
  }
  #header .m_gnb_wrap .close_btn {
    position: absolute;
    right:20px;
    top:20px;
    width:28px;
    height: 28px;
    background: none;
    border:none;
  }
  #header .m_gnb_wrap .close_btn i {
    position: absolute;
    left:0;
    top:50%;
    width:100%;
    height: 2px;
    background: #5b606a;
    margin-top:-1px;
    transform: rotateZ(45deg);
  }
  /* nth-child는 모든형제요소에서 n번째 */
  /* nth-of-type은 다른형제요소가 있어도 동일 태그중에서 n번째 */
  #header .m_gnb_wrap .close_btn i:nth-of-type(2) {
    transform: rotateZ(-45deg);
  }
  #header .m_gnb>li {
    margin-bottom: 30px;
    position: relative;
  }
  #header .m_gnb>li::before {
    content: '';
    position: absolute;
    left:-50px;
    top:8px;
    width:0;
    height: 2px;
    background: #142345;
  }
  #header .m_gnb>li:hover::before {
    /* hover에 transition걸면 hover시에만 애니메이션 작동 */
    transition: all 0.5s;
    width:30px;
  }
  #header .m_gnb>li>a {
    display: block;
    color:#313741;
    font-weight: 500;
  }
  #header .m_gnb>li:hover .depth2 {
    display: block;
  }
  #header .m_gnb .depth2 {
    display: none;
    margin-top:20px;
  }
  #header .m_gnb .depth2 li + li {
    margin-top:12px;
  }
  #header .m_gnb .depth2 a {
    color:#494d54;
    opacity: 0.6;
    transition: all 0.4s;
  }
  #header .m_gnb .depth2 a:hover {
    opacity: 1;
  }
}






@media (max-width:767px) {
  #header .inner {
    height: 60px;
  }
  #header .logo {
    width: 106px;
  }
  #header .logo a {
    height: 25px;
  }
  #header .lang a {
    font-size: 14px;
  }
  #header .lang li.active a::before {
    width:4px;
    height: 4px;
    top:-6px;
  }
  #header .inquiry_btn {
    display: none;
  }

  #header .m_gnb_wrap {
    width:80%;
  }

  .main_slider {
    height: 630px;
  }
}

CSS & HTML 기초(10)

Thu, 28 Mar 2024 09:01:42 GMT

22.넥슨(가변 레이아웃,이미지 커지며그림자와 fade효과,아이콘 공통클래스,한 줄 말줄임

html



  
    
    
    
    
    
    
    
    
    
    
    넥슨
    
    
    
    
    
    
    
  
  
    
      본문바로가기
    
    
      
        
          
            
              전체게임
              
                

                모바일 게임 커뮤니티 모아보기
              
                
                
              
            
            
              #전체
              #얼리 스테이지
              #Windows
              #macOS
              #steam
              #전체
              #얼리 스테이지
              #Windows
              #macOS
              #steam
              #전체
              #얼리 스테이지
              #Windows
              #macOS
              #steam
              #전체
              #얼리 스테이지
              #Windows
              #macOS
              #steam
              #전체
              #얼리 스테이지
              #Windows
              #macOS
            
            
              
                
                  
                    
                  
                  
                    던전앤파이터
                    
                      EVENT
                      ACTION RPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    FC온라인
                    스포츠
                  
                
              
              
                
                  
                    
                  
                  
                    메이플스토리
                    RPG
                  
                
              
              
                
                  
                    
                  
                  
                    프라시아 전기
                    
                      EVENT
                      MMORPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    던전앤파이터
                    
                      EVENT
                      ACTION RPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    FC온라인
                    스포츠
                  
                
              
              
                
                  
                    
                  
                  
                    메이플스토리
                    RPG
                  
                
              
              
                
                  
                    
                  
                  
                    프라시아 전기
                    
                      EVENT
                      MMORPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    던전앤파이터
                    
                      EVENT
                      ACTION RPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    FC온라인
                    스포츠
                  
                
              
              
                
                  
                    
                  
                  
                    메이플스토리
                    RPG
                  
                
              
              
                
                  
                    
                  
                  
                    프라시아 전기
                    
                      EVENT
                      MMORPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    던전앤파이터
                    
                      EVENT
                      ACTION RPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    FC온라인
                    스포츠
                  
                
              
              
                
                  
                    
                  
                  
                    메이플스토리
                    RPG
                  
                
              
              
                
                  
                    
                  
                  
                    프라시아 전기
                    
                      EVENT
                      MMORPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    던전앤파이터
                    
                      EVENT
                      ACTION RPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    FC온라인
                    스포츠
                  
                
              
              
                
                  
                    
                  
                  
                    메이플스토리
                    RPG
                  
                
              
              
                
                  
                    
                  
                  
                    프라시아 전기
                    
                      EVENT
                      MMORPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    던전앤파이터
                    
                      EVENT
                      ACTION RPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    FC온라인
                    스포츠
                  
                
              
              
                
                  
                    
                  
                  
                    메이플스토리
                    RPG
                  
                
              
              
                
                  
                    
                  
                  
                    프라시아 전기
                    
                      EVENT
                      MMORPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    던전앤파이터
                    
                      EVENT
                      ACTION RPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    FC온라인
                    스포츠
                  
                
              
              
                
                  
                    
                  
                  
                    메이플스토리
                    RPG
                  
                
              
              
                
                  
                    
                  
                  
                    프라시아 전기
                    
                      EVENT
                      MMORPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    던전앤파이터
                    
                      EVENT
                      ACTION RPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    FC온라인
                    스포츠
                  
                
              
              
                
                  
                    
                  
                  
                    메이플스토리
                    RPG
                  
                
              
              
                
                  
                    
                  
                  
                    프라시아 전기
                    
                      EVENT
                      MMORPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    던전앤파이터
                    
                      EVENT
                      ACTION RPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    FC온라인
                    스포츠
                  
                
              
              
                
                  
                    
                  
                  
                    메이플스토리
                    RPG
                  
                
              
              
                
                  
                    
                  
                  
                    프라시아 전기
                    
                      EVENT
                      MMORPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    던전앤파이터
                    
                      EVENT
                      ACTION RPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    FC온라인
                    스포츠
                  
                
              
              
                
                  
                    
                  
                  
                    메이플스토리
                    RPG
                  
                
              
              
                
                  
                    
                  
                  
                    프라시아 전기
                    
                      EVENT
                      MMORPG
                    
                  
                
              
              
                
                  
                    
                  
                  
                    던전앤파이터
                    
                      EVENT
                      ACTION RPG

css

/* 컬러 변수 */
:root {
  --point-color1: #07f;
  --point-color2: #2be283;
  --txt-color-400: #9fa1a7;
  --txt-color-500: #4a4e57;
  --txt-color-600: #17191d;
}
#wrap {
  min-width: 1004;
  background: #f8f9fa;
}

.main_game {
  padding-bottom: 300px;
}

.main_game .inner {
  width: 1280px;
  margin: 0 auto;
}

.main_game .game_top {
  display: flex;
  align-items: center;
}

.main_game .game_top h2 {
  font-family: 'NEXONLv1Gothic', sans-serif;
  font-size: 24px;
  color: var(--txt-color-600);
  margin-right: 15px;
}

.main_game .game_top .link_btn {
  font-family: 'NEXONLv1Gothic', sans-serif;
  color: #4a4e57;
  display: flex;
  align-items: center;
}

.main_game .game_top .link_btn:hover {
  color: var(--point-color1);
}

.main_game .game_top .link_btn:hover i {
  background-position-x: -50px;
}

.main_game .game_top .link_btn::after {
  content: '';
  width: 18px;
  height: 18px;
  background: url(../images/set_newpage.svg);
  margin-left: 5px;
}

.main_game .game_top .link_btn:hover::after {
  background-position-x: -50px;
}

.main_game .game_top .search {
  /* flex아이템에 마진 auto 사용 시 반대방향 끝까지 밀림 */
  margin-left: auto;
  position: relative;
}

.main_game .game_top .search input[type='search'] {
  height: 44px;
  width: 100%;
  border: none;
  background: none;
  border-bottom: 1px solid #dde1e5;
  padding: 0 40px 0 3px;
}

.main_game .game_top .search_btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  /* svg로 해야 적용가능 */
  -webkit-mask: url(../images/search_FILL0_wght300_GRAD0_opsz24.svg) no-repeat
    center center / 20px;
  mask: url(../images/search_FILL0_wght300_GRAD0_opsz24.svg) no-repeat center
    center 20px;
  background: var(--txt-color-600);
  border: none;
}

.main_game .game_top .search_btn:hover {
  background: var(--point-color1);
}

.main_game .filter {
  margin-top: 20px;
  background: #fff;
  height: 100px;
  padding: 0 30px;
  display: flex;
  /* 두 줄 가운데 정렬 */
  align-content: center;
  flex-wrap: wrap;
  gap: 17px 16px;
}

.main_game .filter a {
  padding: 0 10px;
  line-height: 21px;
  color: #9fa1a7;
  transition: all 0.2s;
}

.main_game .filter a:hover {
  color: var(--point-color1);
}

.main_game .filter a.active {
  background: var(--txt-color-600);
  color: #fff;
  border-radius: 11px;
}

.main_game .game {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 24px;
  margin-top: 35px;
}

.main_game .game li {
  /* flex-wrap으로 내려간 경우 간격의 총합 / 컬럼 수 만큼 빼야함 */
  width: calc(25% - 72px / 4);
  transition: box-shadow 0.5s;
}

.main_game .game .img_wrap {
  position: relative;
  overflow: hidden;
}

.main_game .game .img_wrap::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
  /* 페이드 효과에 cubic-bezier 사용하지 말 것 
  페이드 효과에는 시각적으로 차이가 없음*/
  transition: all 0.15s;
}
.main_game .game .img_wrap img {
  transition: all 0.2s;
}

.main_game .game li:hover .img_wrap::after {
  opacity: 0;
}

.main_game .game li:hover .img_wrap img {
  transform: scale(1.1);
}

.main_game .game .txt_wrap {
  height: 120px;
  background: #fff;
  padding: 24px 24px 0;
}

.main_game .game .txt_wrap strong {
  font-size: 16px;
  font-family: 'NEXONLv1Gothic', sans-serif;
  color: var(--txt-color-600);
  margin-bottom: 10px;
  display: block;
}

.main_game .game .txt_wrap .type {
  color: var(--txt-color-400);
}

.main_game .game .txt_wrap .event {
  color: var(--point-color1);
  font-weight: 700;
}

.main_game .game li:hover {
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
}

@media (max-width: 1412px) {
  .main_game .inner {
    width: 954px;
  }

  .main_game .game li {
    /* 48px / 3 = 16px */
    width: calc(100% / 3 - 16px);
  }
}

CSS & HTML 기초(8)

Mon, 25 Mar 2024 08:39:29 GMT

20. 코리아 리서치 인터내셔널(반응형,2단가로메뉴,video,css캐싱방지)

html



  
    
    
    
    
    
    
    
    
    
    
    KRi | 코리아리서치인터내셔널
    
    
    
    
    
    
  
  
    
      본문바로가기
    
    
      
        
          
            kri
          
          
            
              
                회사소개
                
                  회사 개요
                  리더십
                  성장 가치
                  계열사
                
              
              
                서비스라인
                
                  마케팅 리서치
                  퍼블릭 리서치
                  리서치 Tech.
                  DIY/애자일 리서치
                   AI 빅데이터
                  클라이언트
                
              
              
                콘텐츠라이브러리
                
                  리서치 콘텐츠
                  뉴스/미디어룸
                  커뮤니티
                
              
              
                문의하기
                
                  조사 문의
                  오시는 길
                
              
              
                채용
                
                  회사 문화
                  직무 소개
                  채용 안내
                
              
            
          
          
            
              KOR
              ENG
            
            조사문의
            
            
              메뉴열기
              
              
              
              
            
          
        
        
        
          
          
            
              회사소개
              
                회사 개요
                리더십
                성장 가치
                계열사
              
            
            
              서비스라인
              
                마케팅 리서치
                퍼블릭 리서치
                리서치 Tech.
                DIY/애자일 리서치
                 AI 빅데이터
                클라이언트
              
            
            
              콘텐츠라이브러리
              
                리서치 콘텐츠
                뉴스/미디어룸
                커뮤니티
              
            
            
              문의하기
              
                조사 문의
                오시는 길
              
            
            
              채용
              
                회사 문화
                직무 소개
                채용 안내
              
            
          
        
      
      
        
          메인비디오

css

/* 컬러 변수 */
:root {
  --point-color1: #F8C900;
  --point-color2: #907354;
  --txt-color-400: #8F98AC;
  --txt-color-500: #77797E;
  --txt-color-600: #212121;
}

#wrap {
  height: 3500px;
}

#header {
  position: fixed;
  left:0;
  top:0;
  width:100%;
  z-index: 9999;
}
#header .inner {
  /* 1920은 일반적으로 안적어도되지만 큰모니터에서 좌우가 너무 넓어지는것을 방지해줌 */
  max-width:1920px;
  /* 테블릿 여백 미리줘서 창 줄었을때 안붙게 */
  padding:0 20px;
  height: 100px;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header .logo {
  width:146px;
  /* 제자리띄우기 */
  position: relative;
  z-index: 10;
}
#header .logo a {
  display: block;
  height: 35px;
  background: url(../images/logo_w.svg) no-repeat left top / 100%;
}

/* 헤더기준 가운데 정렬 */
#header .gnb_wrap {
  position: absolute;
  left:0;
  top:0;
  /* 서브메뉴의 기준이므로 100%로 늘려야 서브를 늘릴수있음 */
  width:100%;
  /* gnb 가운데 정렬 */
  display: flex;
  justify-content: center;
}
#header .gnb {
  display:flex;
}
#header .gnb>li {
  padding:0 45px;
}
#header .gnb>li>a {
  color:#fff;
  display: block;
  line-height: 100px;
  font-size: 18px;
  position: relative;
}
#header .gnb>li>a::after {
  content: '';
  position: absolute;
  left:50%;
  bottom: -12px;
  /* scale효과가 있으므로 transform대신 마진으로 중앙정렬 */
  margin-left:-12px;
  width:24px;
  height: 24px;
  background: url(../images/on.png) no-repeat left top / 100%;
  transition: all 0.5s;
  /* 크기를 0%로 안보이게 */
  transform:scale(0);
  z-index: 10;
}
#header .gnb>li:hover>a::after {
  /* transform 기준은 요소의 중심 */
  transform: scale(1);
}

#header .gnb>li:hover .depth2 {
  /* flex로 보여줌 */
  display: flex;
}
#header .gnb .depth2 {
  position: absolute;
  left:0;
  top:100px;
  width:100%;
  height: 100px;
  justify-content: center;
  align-items: center;
  background: #F9F9F9;
  gap: 0 50px;
  display: none;
}
#header .gnb .depth2 a {
  transition: all 0.3s;
  color:rgba(0,0,0,0.5);
  font-weight: 500;
}
#header .gnb .depth2 a:hover {
  color:rgba(0,0,0,1);
}


#header .lang_wrap {
  /* 제자리띄우기 */
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap:0 50px;
}
#header .lang {
  display: flex;
}

/* 메뉴사이 구분선은 글자보다 높이가 작은경우가 많으므로 before로 띄워서 처리 */
#header .lang li + li {
  margin-left: 15px;
  padding-left: 15px;
  position: relative;
}
#header .lang li + li::before {
  content: '';
  position: absolute;
  left:0;
  top:4px;
  width:1px;
  height: 12px;
  background: #fff;
}
#header .lang a {
  color:rgba(255,255,255,0.3);
}
#header .lang li.active a {
  color:#fff;
  position: relative;
}
#header .lang li.active a::before {
  content: '';
  position: absolute;
  left:50%;
  top:-10px;
  transform: translateX(-50%);
  width:6px;
  height: 6px;
  background: #fff;
  /* 정원 */
  border-radius: 50%;
}
#header .inquiry_btn {
  height: 50px;
  color:#fff;
  border-color:#fff;
  border-radius: 25px;
  width:148px;
  font-size: 18px;
  font-weight: 500;
  gap:0 10px;
}

/* flex아이템이므로 블럭임 */
#header .inquiry_btn::after {
  content: '';
  width:22px;
  height: 21px;
  -webkit-mask: url(../images/power_icon.svg) no-repeat left top / 100%;
  mask: url(../images/power_icon.svg) no-repeat left top / 100%;
  background: #ffcc00;
  transform: rotateZ(-135deg);
  transition: all 0.5s;
}
#header .inquiry_btn:hover {
  background: #333;
  border-color:#333;
}
#header .inquiry_btn:hover::after {
  background: #fff;
  transform: rotateZ(0);
}

/* 모바일메뉴버튼 */
#header .open_btn {
  display: none;
}
/* 모바일 메뉴 */
#header .m_gnb_wrap {
  display: none;
}



.main_slider {
  height: 1000px;
  position: relative;
}
.main_slider video {
  /* background-size: cover 기능을 html요소에 적용 */
  width:100%;
  height: 100%;
  object-fit: cover;
}
.main_slider .slider_bottom {
  position: absolute;
  left:0;
  bottom: 0;
  width:100%;
}
.main_slider .slider_bottom img {
  width:100%;
}


/* 헤더 분기점 */
@media (max-width:1550px) {
  #header .gnb>li {
    padding:0 25px;
  }
  #header .gnb>li>a {
    font-size: 16px;
  }
  #header .lang_wrap {
    gap:0 20px;
  }
}



/* 테블릿 분기점 */
@media (max-width:1200px) {
  #header .inner {
    height: 80px;
  }
  #header .logo {
    width:127px;
  }
  #header .logo a {
    height: 30px;
  }
  #header .gnb_wrap {
    display: none;
  }

  #header .open_btn {
    width:26px;
    height: 26px;
    display: flex;
    flex-wrap: wrap;
    gap:2px;
  }
  #header .open_btn i {
    width:12px;
    height: 12px;
    background: #fff;
  }

  #header .m_gnb_wrap {
    /* transform: translateX(100%); */
    display: block;
    position: fixed;
    right:0;
    top:0;
    z-index: 20;
    width:320px;
    /* fixed는 창기준이므로 height 100%가능 */
    height: 100%;
    background: #fff;
    /* 스크롤 */
    /* overflow: auto; */
    /* 세로스크롤영역 강제로 만들기 */
    overflow-y:scroll;
    padding:140px 0 60px 50px;
  }
  #header .m_gnb_wrap .close_btn {
    position: absolute;
    right:20px;
    top:20px;
    width:28px;
    height: 28px;
    background: none;
    border:none;
  }
  #header .m_gnb_wrap .close_btn i {
    position: absolute;
    left:0;
    top:50%;
    width:100%;
    height: 2px;
    background: #5b606a;
    margin-top:-1px;
    transform: rotateZ(45deg);
  }
  /* nth-child는 모든형제요소에서 n번째 */
  /* nth-of-type은 다른형제요소가 있어도 동일 태그중에서 n번째 */
  #header .m_gnb_wrap .close_btn i:nth-of-type(2) {
    transform: rotateZ(-45deg);
  }
  #header .m_gnb>li {
    margin-bottom: 30px;
    position: relative;
  }
  #header .m_gnb>li::before {
    content: '';
    position: absolute;
    left:-50px;
    top:8px;
    width:0;
    height: 2px;
    background: #142345;
  }
  #header .m_gnb>li:hover::before {
    /* hover에 transition걸면 hover시에만 애니메이션 작동 */
    transition: all 0.5s;
    width:30px;
  }
  #header .m_gnb>li>a {
    display: block;
    color:#313741;
    font-weight: 500;
  }
  #header .m_gnb>li:hover .depth2 {
    display: block;
  }
  #header .m_gnb .depth2 {
    display: none;
    margin-top:20px;
  }
  #header .m_gnb .depth2 li + li {
    margin-top:12px;
  }
  #header .m_gnb .depth2 a {
    color:#494d54;
    opacity: 0.6;
    transition: all 0.4s;
  }
  #header .m_gnb .depth2 a:hover {
    opacity: 1;
  }
}






@media (max-width:767px) {
  #header .inner {
    height: 60px;
  }
  #header .logo {
    width: 106px;
  }
  #header .logo a {
    height: 25px;
  }
  #header .lang a {
    font-size: 14px;
  }
  #header .lang li.active a::before {
    width:4px;
    height: 4px;
    top:-6px;
  }
  #header .inquiry_btn {
    display: none;
  }

  #header .m_gnb_wrap {
    width:80%;
  }

  .main_slider {
    height: 630px;
  }
}

CSS & HTML 기초(7)

Fri, 22 Mar 2024 09:10:35 GMT

19.아웃백 헤더(2단세로메뉴, white-space, nowrap, visiblity hidden 페이드 효과)

html



  
    
    
    
    
    
    
    
    아웃백 본앤본 프레스티지 스테이크 | 메뉴 | 아웃백
    
    
    
    
    
    
    
    
    
    
    

    
    
    

    
    
    

    
    

    

    
    
    
  
  
    
      본문 바로가기
    
    
      
        
        
          
            
          
          
            
              
                BRAND
                
                  
                    OUTBACK STORY
                  
                  
                    KERRR FAMILY
                  
                  
                    BEEF STORY
                  
                  
                    STEAK ACADEMY
                  
                  
                    OUTBACK CSR
                  
                
              

              
                MENU
                
                  
                    BONE＆BONE PRESTIGE STEAK
                  
                  
                    PERFECT BONE-IN STEAK EDITION
                    
                  
                  
                    TOMAHAWK STEAK
                  
                  
                    PORTERHOUSE STEAK
                  
                  
                    BLACK LABEL CHEF EDITION
                    
                  
                  
                    STEAK ＆ FAVORITES
                  
                  
                    LUNCH SET
                  
                  
                    PASTA ＆ SALADS
                  
                  
                    WINES
                  
                  
                    DESSERTS ＆ OTHERS
                  
                  
                    DELIVERY
                  
                  
                    LIMITED SPECIAL MENU FOR JEJU
                  
                
              

              
                MEMBERSHIP
                
                  
                    BOOMERANG MEMBERSHIP
                  
                  
                    MEMBERSHIP BENEFIT
                  
                
              

              
                BENEFIT
                
                  
                    CREDIT CARDS
                  
                  
                    SKT＆KT
                  
                  
                    POINT PAYMENT
                  
                  
                    VOUCHER
                  
                  
                    EVENT
                  
                
              

              
                STORE
              
            
          
          
            고객의 소리
            채용
            로그인
            회원가입
          
        
      
      
        
        
          
          메인 슬라이더

css

/* 컬러 변수 */
:root {
  --point-color1: #c30606;
  --point-color2: #907354;
  --txt-color-400: #999;
  --txt-color-500: #666;
  --txt-color-600: #222;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  /* 반응형이거나 아니거나의 차이는 min-width를 거냐 안거냐 */
  /* 반응형일 때는 안검 viewport값과 동일*/
  min-width: 1260px;
  height: 1500px;
}

#header {
  /* 헤더 위치 고정 */
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(52, 52, 54, 1);
  width: 100%;
  z-index: 9999;
  /* fixed요소는 창 기준이므로 #wrap의 min-width가 안먹음 */
  min-width: 1260px;
}

#header .inner {
  width: 1180px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

#header .gnb_wrap {
  margin-left: 80px;
}

#header .gnb {
  display: flex;
}

#header .gnb > li {
  padding: 0 15px;
  position: relative;
}

#header .gnb > li > a {
  display: block;
  line-height: 100px;
  color: #fff;
  font-size: 19px;
  font-family: 'Akrobat', sans-serif;
  letter-spacing: 0.12em;
  /* 하단 바 기준 잡기 */
  position: relative;
}

#header .gnb > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 100%;
  height: 3px;
  background: var(--point-color1);
  /* 하단 바 끄기 */
  display: none;
}

/* 하단 바 켜기 */
#header .gnb > li:hover > a::after {
  display: block;
}

#header .gnb > li:hover .depth2 {
  opacity: 1;
  visibility: visible;
}

/* 헤더 이중 리스트 gnb구조에서 서브 메뉴는 무조건 띄울 것 */
/* 안띄우면 서브 메뉴의 글자가 길기 때문에 주메뉴 작업이 불가 */
#header .gnb .depth2 {
  position: absolute;
  left: 0;
  top: 100px;
  background: rgba(0, 0, 0, 0.6);
  padding: 28px 30px;
  /* 글자가 밑으로 안떨어지게 하기(줄바꿈 X) */
  white-space: nowrap;
  /* 하단 바 끄기 */
  /* display: none;은 transition이 안된다. */
  /* display: none; */

  /* 페이드 효과 이므로 투명도 사용 */
  opacity: 0;
  /* 영역이 마우스에 반응하지 않도록 */
  visibility: hidden;
  transition: all 0.5s;
}

#header .gnb .depth2 li + li {
  margin-top: 15px;
}

#header .gnb .depth2 a {
  color: #fff;
}

#header .login {
  /* flex구조에서 마진 오토 사용 시 반대방향 끝까지 밀림 */
  margin-left: auto;
  display: flex;
  gap: 0 20px;
}

#header .login a {
  color: var(--txt-color-400);
  font-size: 13px;
  display: block;

  line-height: 30px;
}

#header .login .join a {
  width: 86px;
  /* 글자가 길어질 수 있으면 좌우 패딩 처리 */
  /* padding: 0 19px */
  background: #555;
  text-align: center;
  color: #fff;
}
/* 헤더가 fixed구조인 경우 main_Slider에 margin-top 사용 시 마진 병합 발생하므로 패딩으로 밀어줌(헤더는 떠있기 때문에 인접이 아님) */
#container {
  padding-top: 100px;
}

.main_slider {
  overflow: hidden;
  /* 안쪽 요소가 포지션으로 떠있으면 높이가 0이되며 높이를 잡아야 다음 섹션이 겹치지 않음 */
  height: 900px;
  /* 포지션 앱솔의 기준 */
  position: relative;
}

.main_slider a {
  position: absolute;
  left: 50%;
  top: 0;
  /* 자신 가로 길이 절반만큼 왼쪽으로 이동 */
  transform: translateX(-50%);
}

.main_slider img {
  /* 창 크기를 줄일 때 이미지가 줄어들지 않도록 */
  max-width: none;
}

CSS & HTML 기초(6)

Thu, 21 Mar 2024 09:04:51 GMT

18. Position(레이어, relative, absolute, fixed)

html



  
    
    
    
    
    
    
    
    position(레이어)
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    

    
    
    
  
  
    
      본문 바로가기
    
    
      
        
          
            
              
            
          

          
            pararararararpararararararpararararararpararararararpararararararpa
          
        
      
      
        
          
            
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
            
            layer
          
        
        
          
            amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk

css

/* 컬러 변수 */
:root {
  --point-color1: #03c75a;
  --point-color2: #9858f5;
  --txt-color-400: #404040;
  --txt-color-500: #101010;
  --txt-color-600: #080808;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  /* 반응형이거나 아니거나의 차이는 min-width를 거냐 안거냐 */
  /* 반응형일 때는 안검 */
  min-width: 1280px;
  height: 1500px;
}

/* position: fixed; 창고정 레이어 */
/* 크기는 내용만큼 줄어듬 */
/* position: fixed;사용 시 위치속성을 안적으면 위치가 달라질 수 있음 */
/* fixed레이어는 창기준이므로 #wrap의 min-width 적용되지 않으며 직접 적어야함 */
#header {
  background: #ddd;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
  min-width: 1280px;
}

#header .inner {
  width: 1200px;
  height: 150px;
  border: 1px solid red;
  margin: 0 auto;
  /* 앱솔 요소의 기준 */
  position: relative;
  z-index: 0;
}

/* position: absolute; 걸면 제자리에서 공중에 뜸 */
/* 크기가 내용만큼 줄어듬 */
/* 인라인 요소에 앱솔, fixed 사용 시 블럭으로 변경됨 */
/* 포지션으로 떠있는 요소는 수직 방향 인접이 아니므로 마진 병합 없음 */
/* left top right bottom 위치 속성을 적으면 기준 요소를 따라 이동 됨 */
/* 앱솔 요소의 바깥에 기준이 없으면 창 기준 */
/* 앱솔 요소를 감싸고 있는 바깥 요소에 기준줄 수 있음 */
/* 앱솔 요소의 기준은 먼저 감싸고 있는 요소에 position속성이 있으면 기준이 됨 */
/* right bottom 사용 시 요소 기준점이 우하단으로 변경되며 margin방향도 맞춰야함 */
/* 포지션 요소 가운데 정렬: left: 50% top:50% transform: translate(-50%, -50%); */
/* 포지션 앱솔 요소는 기준요소에 height이 없어도 기준 요소 높이만큼 height:100%가능 */
/* 포지션 요소는 기준 요소의 패딩이 안먹음(공중에 떠있으므로) */
/* 포지션 앱솔 요소의 크기를 width,height없이 left, right, top, bottom으로 잡을 수 있음 */
/* 포지션 요소의 순서는 z-index:auto(기본 값)이므로 나중에 나온 레이어가 위로 쌓임 */
/* z-index: 의 크기가 클 수록 가장 위에 쌓인다. */
/* 스크롤 시 컨텐츠보다 무조건 위에 떠있어야되는 레이어는 z-index:9999, 1000등 매우 큰값으로 세팅하자 음수로 세팅할 경우 가장 뒤로 쌓인다*/
/* z-index 음수 사용 시 body(바닥)까지 내려가며 클릭 안됨. */
/* 기준 안에서 z-index 음수로 하나의 요소를 가장 아래로 배치할 경우 
- 기준 요소에 z-index있어야 하며 아래로 배치할 요소에 z-index:-1사용
- 기준 요소에 z-index가 없으면 body까지 내려간다. */
#header .logo {
  border: 3px solid red;
  position: absolute;
  /* margin-top: 40px; */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  /* margin-right: 100px;
  margin-bottom: 50px; */
}

#header .logo img {
  max-width: none;
}

#header .inner::after {
  content: '';
  position: absolute;
  left: 30px;
  right: 30px;
  top: 30px;
  bottom: 30px;
  border: 3px solid black;
}

#header p {
  font-size: 30px;
  background: greenyellow;
  position: absolute;
  left: 0;
  top: 50%;
}

/* 헤더가 flex구조인 경우 컨테이너에서 패딩으로 밀어줌 */
#container {
  padding-top: 150px;
}

/* position:relative는 자신의 원래 위치를 기억하는 특수 레이어 */
/* 앱솔 요소의 기준이 필요할 경우 사용 */
/* position:relative 적으러 갔을 때 position속성이 있는경우 그냥 놔두면 기준이 됨*/
.main_etc .inner {
  position: relative;
  width: 1200px;
  height: 500px;
  border: 1px solid red;
  margin: 0 auto;
}

.main_etc .inner p {
  font-size: 24px;
}

.main_etc .inner .cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 300px;
  background: yellowgreen;
}

.main_test {
  border: 10px solid red;
}

.main_test p {
  font-size: 30px;
}

18-1. Position(레이어, Sticky)

html



  
    
    
    
    
    
    
    
    유진그룹
    
    
    
    
    

    
    
    

    
    
    
    
    
    
    
    

    
    
    

    

    
    
    
  
  
    
      본문 바로가기
    
    
      
        
          Business network
        
        
          
            
              History
            
            
              Vision 
            
            
              PR
            
            
              IR
            
            
              Network
            
          
        
        
          
            
              건자재 유통
              평범한 일상을 새롭게! 유진의 다양한 이야기를 만나보세요.
            
            
              
                
                유진기업(주)
              
              
                (주)동양
              
              
                (주)유진홈센터
              
              
                유진한일합섬(주)
              
              
                (주)유진디랩

css

/* 컬러 변수 */
:root {
  --point-color1: #0042bf;
  --point-color2: #9858f5;
  --txt-color-400: #ccc;
  --txt-color-500: #111;
  --txt-color-600: #000;
}

#container {
  /* 서브 lnb가 길 경우 밖으로 나가면 스크롤이 나오며 스크롤하면 100% 배경이 짤리므로 hidden 설정 */
  /* position:sticky요소 밖에 overflow사용 불가 */
  /* overflow: hidden; */
}

/* 서브 비주얼  */

.sub_visual {
  height: 550px;
  background: url(../assets/images/visual02.jpg) no-repeat 50% 0 / cover;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
}

.sub_visual h2 {
  font-size: 70px;
  color: #fff;
  font-weight: 700;
  padding: 0px 40px;
}

/* lnb */
.lnb_wrap {
  border-bottom: 1px solid #ddd;
  background: #fefefe;
}

.lnb {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
  /* flex사용 시 gap 사용 */
  gap: 0 50px;
  position: relative;
}

.lnb li {
}

.lnb a {
  display: block;
  line-height: 79px;
  font-weight: 500;
  /* 크기를 늘리면서 간격을 넓히려면 패딩 사용 */
  padding: 0 30px;
}

.lnb li.active a {
  color: var(--point-color1);
  position: relative;
}

/* 글자 밑 하단 바 생성하기 */
.lnb li.active a::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 2px;
  bottom: 0; /* 하단 정렬 추가 */
  left: 0; /* 좌측 정렬 추가 */
  background: var(--point-color1);
}

/* network.html */
.network {
  overflow: hidden;
}

.contents {
  background: #fefefe;
  padding: 120px 0 200px;
}

.contents .inner {
  max-width: 1200px;
  padding: 0 40px;
  margin: 0 auto;
}

/* 서브 제목 */
.sub_tit {
  text-align: center;
  margin-bottom: 80px;
}

.sub_tit h3 {
  font-size: 46px;
  content: var(--txt-color-600);
  font-weight: 700;
}

.sub_tit p {
  color: var(--txt-color-600);
  margin-top: 30px;
}

.sub_tab {
  display: flex;
}

.sub_tab li {
  /* 메뉴(li)개수가 다르므로 너비 100%로 설정 시 flex-shrink:1 기본 설정으로 자동으로 줄여준다.*/
  width: 100%;
  border: 1px solid #ddd;
  border-right: none;
}

/* .을 붙여서 사용하면 자기 자신 */
.sub_tab li.active {
  background: var(--point-color1);
  box-shadow: 3px 3px 20px rgba(154, 185, 243, 0.62);
}
.sub_tab li.active a {
  color: #fff;
}

.sub_tab li:last-child {
  border-right: 1px solid #ddd;
  font-weight: 500;
}

.sub_tab a {
  display: block;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
}

/* social페이지 */
.social .sns_wrap {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;
  margin-top: 126px;
}

.social .sns_wrap .sns_menu {
  position: sticky;
  top: 126px;
  border: 5px solid black;
}

.social .sns_wrap li {
  margin-bottom: 50px;
}

.social .sns_menu a {
  font-size: 30px;
  color: #ccc;
  font-weight: 700;
}

.social .sns {
  width: 65%;
  display: flex;
  flex-wrap: wrap;
}

.social .sns li {
  /* 2컬럼 이므로 8% / 2 만큼 빼준다. */
  width: 46%;
  padding: 150px 0;
}

.social .sns li:nth-child(odd) {
  margin-right: 8%;
}

.social .sns li:nth-child(even) {
  margin-top: 80px;
}
.social .sns_wrap .sns {
  border: 5px solid red;
  width: 65%;
}

.network .sub_visual {
  background-image: url(../assets/images/visual07.jpg);
}

/* lnb용 분기점 */
/* 768이상에서 이미 내용이 넘쳐 스크롤바가 나오므로 좀 더 미리 분기점 처리 */
@media (max-width: 780px) {
  .lnb_wrap {
    /* 스크롤로 처리 */
    overflow: auto;
    /* .lnb의 크기를 내용만큼 줄어들게 하여 margin 0 auto가 작동하도록*/
    display: flex;
  }
  .lnb {
    gap: 0;
    /* justify-content: center; 는 창크기가 줄었을 때 좌우 측으로 나가버림 */
    justify-content: flex-start;
  }
  .lnb a {
    padding: 0 16px;
    font-size: 16px;
  }
}

/* 모바일 분기점 */
@media (max-width: 767px) {
  .sub_visual {
    height: 270px;
    padding-top: 80px;
  }

  .sub_visual h2 {
    font-size: 32px;
    text-align: center;
  }

  .contents {
    padding: 60px 0;
  }

  .contents .inner {
    padding: 0 18px;
  }

  .sub_tit {
    margin-bottom: 40px;
  }

  .sub_tit h3 {
    font-size: 24px;
  }
  .sub_tit p {
    font-size: 16px;
    margin-top: 20px;
  }

  .sub_tab a {
    font-size: 15px;
    line-height: normal;
    word-break: break-all;
    height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .social .sns_menu {
    flex-wrap: wrap;
  }

  .social .sns_menu {
    /* 포지션 초기화 */
    position: static;
  }

  .social .sns {
    width: 100%;
  }

  .social .sns li {
    padding: 50px 0;
  }
}

배운점

1. position-sticky가 적용 안되는 경우

position-sticky요소 바깥 쪽에 overflow를 사용하면 sticky가 적용이 안된다!!
flex 아이템인 경우 align-items: flex-start;로 높이가 줄어야한다!!

2. 단위가 없는 css

1. z-index: 9999
1. line-height: 1.5
1. font-weight: 700

숫자 0일 경우

CSS & HTML 기초(5)

Wed, 20 Mar 2024 08:53:18 GMT

16. 기아 멤버스 하단

html



  
    
    
    
    
    
    
    
    메인 | 기아멤버스
    
    
    
    
    
    
    
    

    
    
    
  
  
    
      본문 바로가기
    
    
      
      
        
          
            
              
              All about Kia
              Kia의 다양한 채널과 함께 하세요.
            
            
              
                
                  MyKia
                
              
              
                
                
                  KIA
                
              
              
                
                
                  carpience
                
              
              
                
                
                  카카오 소통채널
                
              
              
                
                
                  페이스북
                
              
              
                
                
                  인스타그램

css
/* 컬러 변수 */
:root {
  --point-color1: #5d7d2b;
  --point-color2: #c7b19b;
  --txt-color-400: #999;
  --txt-color-500: #6b7376;
  --txt-color-600: #05141f;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  /* 반응형이거나 아니거나의 차이는 min-width를 거냐 안거냐 */
  min-width: 1320px;
  height: 1500px;
}

#container .main_channel {
  height: 600px;
  background: url(images/img_main_channer.jpg) no-repeat center top / cover;
  padding-top: 85px;
}

#container .tit_wrap {
  text-align: center;
}

.main_channel .tit_wrap h2 {
  font-size: 38px;
  color: #fff;
  margin-bottom: 15px;
}

.tit_wrap p {
  font-size: 14px;

  color: #fff;
}

.main_channel .channel {
  margin-top: 60px;
  justify-content: space-around;

  display: flex;
}

.main_channel .channel li a {
  display: block;

  width: 84px;
  height: 64px;
  display: flex;
  align-items: center;
}

/* 스플릿 카우 사용해서 위치 구할 수 있음!! */
.main_channel .channel a::after {
  content: '';

  width: 100%;
  height: 28px;
  background: url(images/icon_channer_sns.png) no-repeat 0 -64px;
}

.main_channel .channel li:nth-child(2) a {
  width: 80px;
}

.main_channel .channel li:nth-child(2) a::after {
  height: 20px;
  background-position: -82px 0;
}

.main_channel .channel li:nth-child(3) a {
  width: 70px;
}

.main_channel .channel li:nth-child(3) a::after {
  height: 64px;
  background-position: -254px 0;
}

.main_channel .channel li:nth-child(4) a {
  width: 57px;
}

.main_channel .channel li:nth-child(4) a::after {
  height: 52px;
  background-position: -334px 0;
}

.main_channel .channel li:nth-child(5) a {
  width: 54px;
}

.main_channel .channel li:nth-child(5) a::after {
  height: 54px;
  background-position: -402px 0;
}

.main_channel .channel li:nth-child(6) a {
  width: 54px;
}

.main_channel .channel li:nth-child(6) a::after {
  height: 54px;
  background-position: -466px 0;
}

17.네이버(검색 필드)

css
/* 컬러 변수 */
:root {
  --point-color1: #03c75a;
  --point-color2: #9858f5;
  --txt-color-400: #404040;
  --txt-color-500: #101010;
  --txt-color-600: #080808;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  /* 반응형이거나 아니거나의 차이는 min-width를 거냐 안거냐 */
  /* 반응형일 때는 안검 */
  /* min-width: 1320px; */
  height: 1500px;
}

#header .inner {
  max-width: 1340px;
  height: 267px;
  border: 1px solid red;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  /* 좌우 정렬 */
  justify-content: center;
  /* 수직 정렬 */
  align-items: center;
}

#header .search_area {
  /* 반응형이면 맥스 위드 사용 */
  max-width: 706px;
  /* flex아이템이라 위드 100으로 해줘야 맥스 위드까지 다참  */
  width: 100%;
  border: 1px solid var(--point-color1);
  /* 높이가 60이므로 절반주면 반원 */
  border-radius: 30px;
}

#header .search_area .search_wrap {
  padding-left: 28px;
  display: flex;
  justify-content: space-between;
}

/* input은 속성 선택자를 통해 선택하기(type별로 디자인이 동일하므로) */
#header .search_area input[type='search'] {
  height: 58px;
  font-size: 21px;
  font-weight: 700;
  color: #000;
  max-width: 480px;
  width: 100%;
  border: none;
}

#header .search_area .search_wrap .search_btn {
  height: 58px;
  padding: 0 27px 0 10px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
}

#header .search_area .search_wrap .search_btn::after {
  content: '';
  width: 25px;
  height: 25px;
  /* svg배경 컬러 변경하기 : -webkit-mask */
  -webkit-mask: url(../assets/images/svgexport-1.svg) no-repeat 0 0 /25px;
  mask: url(../assets/images/svgexport-1.svg) no-repeat 0 0 /25px;
  background: var(--point-color1);
}

CSS & HTML 기초(4)

Tue, 19 Mar 2024 08:37:03 GMT

14.아웃백(header, depth1)구현

html



  
    
    
    
    
    
    
    아웃백 스테이크 하우스(OUTBACK STEAKHOUSE)
    
    
    
    
    
    
    
    

    
    
    
  
  
    
      본문 바로가기
    
    
      
        
          
            
              
              
            
          
          
            
              
                BRAND
              
              
                MENU
              
              
                MEMBERSHIP
              
              
                BENEFIT
              
              
                STORE
              
            
          
        
      
      
        
          
          main banner

css

/* 컬러 변수 */
:root {
  --point-color1: #be161e;
  --point-color2: #c7b19b;
  --txt-color-400: #999;
  --txt-color-500: #666;
  --txt-color-600: #222;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  /* 반응형이거나 아니거나의 차이는 min-width를 거냐 안거냐 */
  min-width: 1260px;
  height: 1500px;
}

/* 요소에 띄우는 속성이 적용되면 내용만큼 줄어든다. */
/* 그렇기 때문에 width 100% 적용 */
#header {
  /* fixed레이어는 창기준이므로 #wrap의 min-width가 작동하지 않으므로 직접 지정 */
  min-width: 1260px;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(52, 52, 54, 1);
  width: 100%;
  /* z-index는 단위 없음 */
  /* 다른 레이어 보다 무조건 위에 있도록 9999로 설정*/
  z-index: 9999;
}

#header .inner {
  width: 1180px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

/* flex를 걸면 자식이 flex가 된다. 그래서 부모한테 걸어야됨*/
#header .gnb_wrap {
  margin-left: 80px;
}

#header .gnb {
  display: flex;
}

#header .gnb > li {
  /* 메뉴 구조에서 여백은 li에서 처리하여 클릭 영역을 구분해주는 것이 좋음 */
  padding: 0 15px;
}

/* 자식 선택자 */
#header .gnb > li > a {
  display: block;
  color: #fff;
  font-size: 19px;
  font-family: 'Akrobat', sans-serif;
  /* 메뉴에서 글자를 수직 정렬하며 높이 지정 시 px사용 */
  line-height: 100px;
  letter-spacing: 0.12em;
  position: relative;
}

#header .gnb > li > a::after {
  content: '';
  /* ::after는 인라인이지만 앱솔걸면 블럭이됨 */
  position: absolute;
  left: 0;
  /* 양수면 기준안으로 들어가고 음수면 기준 밖으로 나감 */
  bottom: 20px;
  /* 앱솔걸면 크기가 내용만큼 줄어드므로 100%로 늘려줌 */
  width: 100%;
  display: block;
  height: 3px;
  background: var(--point-color1);
  display: none;
}

/* 이중 리스트 구조에서 :hover는 li에서 해야 서브 메뉴를 같이 조작할 수 있으며 서브메뉴로 마우스가 이동해도 hover가 풀리지 않음 */
#header .gnb > li:hover > a::after {
  display: block;
}

/* 패딩은 밖에서 준다. */
#container {
  padding-top: 100px;
}

.main_slider {
  /* 헤더가 떠있으므로 인접이 아니며 main_slider에서 밖에 있는 메인 컨테이너까지 내려가므로 마진 병합임  */
  /* 그러므로 사용 불가 */
  /* margin-top: 100px; */

  /* 스크롤 바 가리기 */
  overflow: hidden;

  /* 포지션 앱솔의 기준 */
  position: relative;

  /* 안쪽요소가 모두 포지션 앱솔이면 높이가 0이 되며 높이를 지정해야함 */
  height: 900px;
}

/* 일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하고 원하는 위치를 지정 */
.main_slider a {
  position: absolute;
  left: 50%;
  top: 0;
  /* margin-left: -960px; */
  /* translate에 %는 요소 자신의 크기가 기준 */
  transform: translate(-50%);
}

.main_slider img {
  /* none으로 껐기 때문에 이미지가 줄지 않는다. */
  max-width: none;
}

15. 한화 생명(큰 이미지 & 꾸미는 이미지, 리뉴얼 전 주소)구현

html


  
    
    
    
    
    
    
    한화 생명
    
    
    
    
    
    
    
    

    
    
    
  
  
    
      본문 바로가기
    
    
      
        
          
            
              01월의 추천상품
              한화생명 온슈어가 드리는 추천상품입니다.
            
            
              
                
                  저축보험
                  저축보험 vs 은행적금 어떤걸 가입할까?
                
              
              
                
                  내게 맞는 보험 찾기
                  
                    보험 가입이
고민 되시는 분께
꼭 맞는 보험을
찾아드립니다

css
/* 컬러 변수 */
:root {
  --point-color1: #eb6242;
  --point-color2: #c7b19b;
  --txt-color-400: #999;
  --txt-color-500: #333;
  --txt-color-600: #222;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  /* 반응형이거나 아니거나의 차이는 min-width를 거냐 안거냐 */
  min-width: 1140px;
  height: 6000px;
}

.main_recommand {
  height: 610px;
  /* fixed는 ios 사파리에서 안되며 (성능 이슈 때문에 막아놨음) */
  background: url(./images/mainBanner01.jpg) no-repeat center top / cover fixed;
  /* 100%는 이미지 크기가 줄어드므로 cover사용 */
  /* background-size: cover; */
  border: 1px solid red;
  padding-top: 61px;
}

.main_recommand .inner {
  width: 1060px;
  border: 1px solid blue;
  /* 가운데 정렬 */
  margin: 0 auto;
}

.main_recommand .tit_wrap {
  color: #fff;
  border: 1px solid pink;
  text-align: center;
}

.main_recommand .tit_wrap h2 {
  font-size: 40px;
}

.main_recommand .tit_wrap p {
  font-size: 18px;
}

.main_recommand .recommand {
  display: flex;

  /* 좌우는 justify 위 아래는 align */
  justify-content: center;
  margin-top: 30px;
}

.main_recommand .recommand li {
  background: #fff;
  width: 300px;
  border-radius: 5px;

  /* 안쪽 내용인 a는 네모 형태이므로 모서리를 가려줌 */
  overflow: hidden;
}

.main_recommand .recommand li + li {
  margin-left: 40px;
}

.main_recommand .recommand li:nth-child(1) {
  background: #f0f0f0 url(./images/icon-top0102.png) no-repeat bottom right;
}

.main_recommand .recommand li:nth-child(2) {
  background: #f0f0f0 url(./images/icon_searchResult.png) no-repeat bottom right;
}

.main_recommand .recommand a {
  display: block;
  height: 310px;
  padding: 30px 25px;
}

.main_recommand .recommand em {
  font-size: 16px;
  position: relative;
  padding-bottom: 20px;
  /* em은 인라인이므로 위아래 패딩이 제대로 작동하지 않음 */
  display: block;
}

.main_recommand .recommand em::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 16px;
  height: 3px;
  background: var(--point-color1);
}

.main_recommand .recommand p {
  font-size: 27px;
  color: var(--txt-color-600);
  margin-top: 10px;
  line-height: 1.2;
}

.main_recommand .recommand strong {
  color: var(--point-color1);
}

CSS & HTML 기초(3)

Mon, 18 Mar 2024 08:47:55 GMT

10. display 특성

html



  
    
    
    
    
    
    
    웹 폰트 변환하여 연결하기
    
    
    
    

    
    
    
  
  
    
      본문 바로가기
    
    
      
        
          
            chatGPT
            
              1. 시작하기 플러터에서 현재 공식지원되는 라이브러리인
              tflite_flutter를 사용하기 위해서는 tflite(TensorFlow Lite)파일이
              필요로 한다. 2. tflite란? TensorFlow공식 문서에 들어가보면
              tflite(TensorFlow Lite)는 개발자가 모바일, 내장형 기기,
              IoT기기에서 모델을 실행할 수 있도록 지원하여 기기 내 머신러닝을
              사용할 수 있도록 하는 도구 모음이라고 한다.
            
            
              3. TensorFlow Lite 모델 생성하는 방법 TensorFlow Lite Model Maker
              라이브러리를 사용하여 자체 맞춤 데이터 세트를 포함하는 모델 생성
              TensorFlow 모델을 TensorFlow Lite 모델로 변환(TensorFlow Lite
              변환기 사용) Teachable Machine 사용하기 나는 인공지능, 딥러닝을
              전공한 개발자가 아니기 때문에 3번을 사용하여 tflite모델을
              생성했다. 4.
            
            
              Teachable Machine이란? Teachable Machine은 구글에서 만든 웹기반
              노코드 인공지능 학습 툴로 이미지,오디오,포즈 샘플을 추가하여
              모델을 학습시키면 프로젝트에서 사용할 수 있는 모델로 내보낼 수
              있다.

css
/* 컬러 변수 */
:root {
  --point-color1: #ff601e;
  --point-color2: #feb12d;
  --txt-color-400: #888;
  --txt-color-500: #666;
  --txt-color-600: #000;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  min-width: 1280px;
  height: 1500px;
}

/* width는 자동으로 100% height는 내용만큼 매치*/
#header {
  border: 5px solid red;
  width: 1200px;
  margin-top: 50px;
  padding-top: 50px;
}

#header a {
  border: 1px solid black;
  height: 40px;
  margin-right: 30px;
  padding-right: 30px;
  /* 인라인 요소에 마진,패딩 상하 불가 */
  margin-top: 20px;
  padding-top: 20px;
  /* display 변경가능 */
  /* block으로 바꿀 시 인라인에서 block으로 바뀐다. */
  display: inline-block;
  /* display: block; */
}

#header button {
  height: 50px;
  margin-top: 50px;
  padding-top: 30px;
  /* 요소를 안보이게 */
  display: none;
}

11. 교원 라이프 하단메뉴 구현

html


  
    
    
    
    
    
    
    교원라이프
    
    
    
    

    
    
    
  
  
    
      본문 바로가기
    
    
      
        
          
            기타 서비스
            
              
                
                  
                  회사소개
                  
                    삶의 희로애락을 함께하는
토털 라이프케어 서비스 기업
                  
                
              
              
                
                  교원라이프 소식
                  교원라이프의 주요 소식을
알려드립니다.
                
              
              
                
                  교원예움 장례식장
                  
                    떠나는 고인을 진심으로 추모하고,
남겨진 분들은 따뚯하게
                    위로합니다.
                  
                
              
              
                
                  자주하는 질문
                  교원라이프의
자주하는 질문입니다.

css

/* 컬러 변수 */
:root {
  --point-color1: #ff7200;
  --point-color2: #feb12d;
  --txt-color-400: #888;
  --txt-color-500: #222;
  --txt-color-600: #000;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  /* min-width: 1280px; */
  height: 1500px;
}

.main_etc {
  background: #f0f0f0;
  /* 패딩은 바깥요소에서 잡고 가기 */
  padding: 70px 0;
}

.main_etc .inner {
  /* 반응형으로 창이 줄어들 때 줄어들어야 하므로 max-width 사용 */
  /* 기본 그리드 + 좌우 패딩 */
  max-width: 1230px;
  margin: 0 auto;
  /* 창이 줄어들경우 좌우가 붙지 않도록 테블릿 여백을 미리 준다*/
  padding: 0 15px;
}

.main_etc .etc {
  display: flex;
  /* 좌우 여백 */
  gap: 0 15px;
}

.main_etc .etc li {
  width: 25%;
  box-shadow: 2px 2px 4px rgba(220, 220, 220, 1);
}

/* hover: 마우스 올려뒀을 때의 상태 */
.main_etc .etc li:hover h3 {
  color: var(--point-color2);
}

.main_etc .etc a {
  display: block;
  /* 높이는 안에서 잡고 너비는 밖에서 */
  height: 250px;
  padding: 40px 25px 0;
  /* background: 색 url() 반복옵션 x xoffset y위치 yoffset / 가로크기 세로크기 */
  background: #fff url(./images/company.svg) no-repeat right 25px bottom 25px /
    auto 55px;
}

.main_etc .etc li:nth-child(2) a {
  background-image: url(images/mic.svg);
}

.main_etc .etc li:nth-child(3) a {
  background-image: url(images/chrysanthemum.svg);
}

.main_etc .etc li:nth-child(4) a {
  background-image: url(images/qna.svg);
}

.main_etc .etc h3 {
  font-size: 22px;
  font-weight: 500;
}

.main_etc .etc p {
  font-size: 16px;
  color: var(--txt-color-400);
  /* 이동은 항상 마진 */
  margin-top: 12px;
}

/* 태블릿 분기점 */
@media (max-width: 1200px) {
  .main_etc .etc p br {
    display: none;
  }
}

/* 모바일 분기점 */
@media (max-width: 767px) {
  .main_etc {
    padding: 35px 0;
  }
  .main_etc .etc {
    flex-wrap: wrap;
    gap: 15px;
  }

  .main_etc .etc li {
    /* 필셀은 소수점 불가 */
    width: calc(50% - 15px / 2);
  }
  .main_etc .etc a {
    padding: 25px 15px 0;
    height: 200px;
    background-size: auto 45px;
    background-position: right 15px bottom 15px;
  }
  .main_etc .etc h3 {
    font-size: 18px;
  }

  .main_etc .etc p {
    font-size: 14px;
  }
}

12. overflow

html



  
    
    
    
    
    
    
    overflow
    
    
    
    

    
    
    
  
  
    
      본문 바로가기
    
    
      
        
          
            
              1. 시작하기 플러터에서 현재 공식지원되는 라이브러리인
              tflite_flutter를 사용하기 위해서는 tflite(TensorFlow Lite)파일이
              필요로 한다. 2. tflite란? TensorFlow공식 문서에 들어가보면
              tflite(TensorFlow Lite)는 개발자가 모바일, 내장형 기기,
              IoT기기에서 모델을 실행할 수 있도록 지원하여 기기 내 머신러닝을
              사용할 수 있도록 하는 도구 모음이라고 한다.
            
            
              3. TensorFlow Lite 모델 생성하는 방법 TensorFlow Lite Model Maker
              라이브러리를 사용하여 자체 맞춤 데이터 세트를 포함하는 모델 생성
              TensorFlow 모델을 TensorFlow Lite 모델로 변환(TensorFlow Lite
              변환기 사용) Teachable Machine 사용하기 나는 인공지능, 딥러닝을
              전공한 개발자가 아니기 때문에 3번을 사용하여 tflite모델을
              생성했다. 4.
            
            
              Teachable Machine이란? Teachable Machine은 구글에서 만든 웹기반
              노코드 인공지능 학습 툴로 이미지,오디오,포즈 샘플을 추가하여
              모델을 학습시키면 프로젝트에서 사용할 수 있는 모델로 내보낼 수
              있다.

css

/* 컬러 변수 */
:root {
  --point-color1: #ff7200;
  --point-color2: #feb12d;
  --txt-color-400: #888;
  --txt-color-500: #222;
  --txt-color-600: #000;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  /* min-width: 1280px; */
  height: 1500px;
}

.main_etc {
  background: #f0f0f0;
  /* 패딩은 바깥요소에서 잡고 가기 */
  padding: 70px 0;
}

.main_etc .inner {
  /* 반응형으로 창이 줄어들 때 줄어들어야 하므로 max-width 사용 */
  /* 기본 그리드 + 좌우 패딩 */
  max-width: 1230px;
  margin: 0 auto;
  /* 창이 줄어들경우 좌우가 붙지 않도록 테블릿 여백을 미리 준다*/
  padding: 0 15px;
  border: 4px solid red;
  height: 100px;
  /* overflow: visible; -> 기본값 넘친 내용을 그대로 보여준다 */
  overflow: visible;
  /* overflow: auto; -> 스크롤로 보여줌 */
  overflow: auto;

  /* overflow: hidden; -> 넘친 내용을 가려줌 */
  overflow: hidden;

  /* overflow: scroll; -> 가로 스크롤도 가능 */
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: hidden;
}

13. 웹 폰트 연결

common.css

@font-face {
  font-family: 'Akrobat';
  font-style: normal;
  font-weight: 800;
  src: url(./assets/fonts/Akrobat-ExtraBold.eot);
  src: url(./assets/fonts/Akrobat-ExtraBold.eot?#iefix)
      format('embedded-opentype'),
    url(./assets/fonts/Akrobat-ExtraBold.woff) format('woff'),
    url(./assets/fonts/Akrobat-ExtraBold.ttf) format('truetype');
}


/* main.css */

.main_etc h2 {
  font-size: 50px;
  font-family: 'Akrobat', sans-serif;
}

CSS & HTML 기초(2)

Fri, 15 Mar 2024 09:02:59 GMT

9. CJ도너스캠프 퍼블리싱

HTML





  
    
    
    
    CJ도너스캠프
    
    

    
  
  
    
      
        
          main visual
        
        
          
            
              
                아동 청소년의
                문화꿈지기가 되어 함께 사는 사회를
                만들어가겠습니다.
              
            
            
              
                
                
                  
                  꿈 키움 지원사업
                  
                    아동·청소년·청년의 교육과

                    자립을 지원합니다.
                  
                
              
              
                
                  
                  청소년 문화동아리
                  
                    중고등학생 동아리들을 대상으로

                    문화 창작·체험의 기회를 제공합니다.
                  
                
              
              
                
                  
                  꿈키움 아카데미
                  
                    청년들의 성장을 지원하는

                    취업연계 교육을 제공합니다.

CSS



/* 컬러 변수 */
:root {
  --point-color1: #ff601e;
  --point-color2: #feb12d;
  --txt-color-400: #888;
  --txt-color-500: #666;
  --txt-color-600: #000;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  min-width: 1280px;
  height: 1500px;
}

.main_visual {
  height: 560px;
  background: url(./images/visual_01.jpeg) /* 이미지 반복 금지 */ no-repeat
    center top;
}

/* 요소 이동 시 부모를 이동하면 안쪽 요소도 같이 이동되므로 부모로 이동 */
.main_intro {
  margin-top: -58px;
}

/* 바깥쪽 100% 항상 놔두고 안쪽 inner에서 가로길이 지정하기 */
/* 100% 디자인이 추가되는 경우가 매우매우 많음 */
.main_intro .inner {
  width: 1200px;
  margin: 0 auto;
}

.main_intro .txt_wrap {
  padding: 45px 0;
  background: #fff;
}

.main_intro .txt_wrap p {
  font-size: 24px;
  text-align: center;
  color: var(--txt-color-600);
}

.main_intro .txt_wrap p strong {
  color: var(--point-color1);
  font-weight: 700;
}

.main_intro .intro {
  display: flex;
  gap: 0 6px;
  align-items: flex-start;
}

/* 가로는 밖에서 높이는 안에서 잡아줘야 한다 */
.main_intro .intro li {
  width: calc(100% / 3);
  background: #f7f7f7;
}

.main_intro .intro li.active {
  background: url(./images/bg-home-type.png) no-repeat;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
}

/* 아래쪽에 선언한 선택자보다 점수를 올리기 위해 #container사용 */
/* a::before -> 가상요소 선택자 */
#container .main_intro .intro li.active a::before {
  /* x값만 변경 */
  background-position-x: -55px;
}

.main_intro .intro li.active .tit {
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.main_intro .intro li.active .txt {
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* a태그는 상자가 아니니 display block으로 설정 */

.main_intro .intro li a {
  height: 178px;
  display: block;
  padding: 43px 15px 0 130px;
  position: relative;
}

.main_intro .intro a::before {
  content: '';
  /*  position: absolute; 바깥부모의 기준을 잡아줘야한다. */
  position: absolute;
  left: 40px;
  top: 40px;
  width: 45px;
  height: 43px;
  background: url(./images/ico-home-type.png) no-repeat 0 4px;
}

.main_intro li:nth-child(2) a:before {
  background-position: 0 -40px;
}

.main_intro li:nth-child(3) a:before {
  background-position: 0 -83px;
}
.main_intro .intro li .tit {
  font-size: 24px;
  color: var(--txt-color-600);
  /* 칸을 늘릴 필요가 없으면 마진 사용 */
  margin-bottom: 15px;
}

.main_intro .intro li .txt {
  font-size: 15px;
}

CSS & HTML 기초(1)

Thu, 14 Mar 2024 09:02:50 GMT

1. HTML 기본 태그

Document

섹션에는 반드시 하나이상의 제목 태그가 필요

facebook link
google link
naver link

카테고리 제목: 카테고리1; 카테고리2; 카테고리3

2. 절대 경로 설정

main.html





  
    
    
    
    03
  
  
    
    
      
        
          
            
          
          
        
        
          
            go sub page
          
        
        
        
        
        naver
        

        메인컨텐츠로 이동
        

        footer이동
      
      
        
        메인& 컨텐츠
      
      
      
      foo    ter<asd>

3. CSS 적용하기

main.html



  
    
    
    스타일 적용하기
    
    
  
  
    
      
      
        
          
            
          
        
        외부 스타일 적용하기

common.css

#header {
  width: 1000px;
  /* %단위는 부모의 크기가 기준 */
  width: 50%;
  height: 700px;
}

/* 클릭 요소에 탭키로 포커스 이동 시 외곽선이 생기며(키보드 접근성) 끌 수 있음 */
#header .logo a {
  outline: none;
}

#header .txt {
  font-size: 50px;
  /* 축약형 */
  /* border: 5px solid red; */
  /* 개별 속성 */
  /* border-top: none; */
  /* border-bottom: 10px dashed blue; */

  /* 값을 생략할 수 있지만 안되는 경우도 있으므로 생략하지말기 */
  /* 색은 16진수 헥사코드 사용 */
  /* 두자리가 같을 경우 한자리로 표현 가능 */
  border-bottom: 10px solid #00f;
  /* %를 의미하는 경우 소수 두자리 가능 */
  border-top: 10px solid rgba(0, 0, 0, 0.55);
}

4. CSS 선택자 우선 순위

common.css

/* *: 전체 선택자 */
* {
  /* 바깥 여백 */
  margin: 0;
  /* 안쪽 여백 */
  padding: 0;
}

/* 동시 선택자 */
h2,
h3,
h4,
h5 {
  font-size: 30px;
  color: red;
}

/* 아이디 선택자: 100점 */
#header {
  width: 1200px;
  height: 150px;
  border: 5px solid red;
}

/* 하위 선택자 */
/* 110점이므로 위에 있더라도 우선순위가 높아진다. */
/* !important키워드를 붙이면 10000점, 인라인 스타일을 덮어 씌울때만 사용 */
#header .logo {
  border: 3px solid black !important;
}

/* 클래스 선택자 10점 */
/* .logo {
  border: 3px solid yellowgreen;
} */

/* 자식 선택자: 부모의 직계 자식만 선택가능(>) */
/* 이중 리스트 구조에서 바깥쪽 li와 a는 반드시 자식 선택자 사용해야함 */
#header .gnb > li {
  border: 1px solid red;
}

/* li의 자식인 a 사용 */
#header .gnb > li > a {
  background: yellowgreen;
}

#header .gnb .depth2 li {
  border: 2px solid black;
}

/* 태그 선택자 1점, 속성 선택자: 폼 요소 선택 시 사용 */
/* +: 인접형제 선택자 */
/* input[type='checkbox']에 이어져 나오는 label을 선택 */
input[type='checkbox'] + label {
  color: red;
}

6. 가상 클래스,요소 선택자

common.css

/* *: 전체 선택자 */
* {
  /* 바깥 여백 */
  margin: 0;
  /* 안쪽 여백 */
  padding: 0;
}

/* link가 걸린 a를 의미 */
/* 가상 클래스 10점 */
/* 밑줄 빼기 */
/* a:link {
  color: red;

  text-decoration: none;
} */

/* 방문하고 왔을 경우 */
/* a:visited {
  color: grey;
} */

/* 마우스를 올렸을 경우 */
/* a:hover {
  text-decoration: underline;
} */

/* 클릭이 아니며 클릭 동작은 자스로 처리 */
/* a:active {
  color: blue;
} */

/* 일반 사이트에서 a초기화 */
a {
  text-decoration: none;
  color: #000;
}

#wrap {
  height: 1500px;
}

/* li:first-child -> li태그의 형제 요소 중 첫번째 요소만 선택 */
/* #header .list li:first-child {
  border: 1px solid blue;
} */

/* 형제 중 n번째 요소 선택 */
/* #header .list li:nth-child(3) {
  border: 3px solid blue;
} */

/* 형제 중 짝수 선택 */
/* #header .list li:nth-child(even) {
  border: 3px solid blue;
} */

/* 홀수  */
/* #header .list li:nth-child(odd) {
  border: 3px solid red;
} */

/* 1, 4, 7번째 선택 */
/* n은 0부터 시작, child는 1부터 */
/* #header .list li:nth-child(3n + 1) {
  border: 3px solid red;
} */

/*  */
/* #header .list li:last-child {
  border: 3px solid red;
} */

/* li:not(:last-child) -> li중 마지막 요소가 아닌 li선택 */
#header .list li:not(:last-child) {
  border: 3px solid blue;
}

/*  #header .list li[class^='item'] -> id 헤더의 class 리스트의 모든 자식인 li중 class이름에 item으로 시작하는 것만 */
/* #header .list li[class^='item'] {
  background: red;
} */

/* (*=) -> 클래스 이름에서 item이 들어가 있는 */
#header .list li[class*='item'] {
  background: red;
}

/* 같은 클래스에 포함된 두개의 클래스므로 붙여서 작성 */
#header .list .box.item2 {
  color: dodgerblue;
}

#header .list .box {
  color: #fff;
}

/* container id는 특별한 경우가 아니면 적지않음 */
.main_etc {
  border: 5px solid black;
  height: 400px;
}

.main_etc h2 {
  text-align: center;
  font-size: 80px;
  position: relative;
}

/* 가상요소 선택자: 꾸밀 때 사용 */
/* h2::before -> h2의 앞에 content추가 */
.main_etc h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  width: 100px;
  height: 5px;
  background: red;
}

7. 폰트

common.css

/* *: 전체 선택자 */
* {
  /* 바깥 여백 */
  margin: 0;
  /* 안쪽 여백 */
  padding: 0;
}

/* font축약형 사용금지!: font축약형은 숨겨진 여러 속성값이 있으므로 상속 성질이 있으므로 body에 주면 모두 적용*/
/* 시스템 폰트는 한글, 영문 모두 적어야함(맥에서는 한글 인식 불가) */
/* sans-serif: 고딕 */
/* 앞쪽의 폰트가 없을 경우 os별 기본 고딕체로 보여짐 */
/* 폼요소는 기본 폰트가 다르므로 따로 지정한다 */
body,
input,
textarea,
select,
button,
table {
  /* 시스템 폰트 */
  font-family: -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕',
    helvetica, 'Apple SD Gothic Neo', sans-serif;
  /* 본문 기본 크기 */
  font-size: 16px;
  /* 본문 기본 색상 */
  color: #666666;
}

#wrap {
  height: 1500px;
}

.main_etc {
  width: 1200px;
  height: 500px;
  border: 4px solid red;
  margin: 0 auto;
}

.main_etc h2 {
  font-size: 50px;
  /* 폰트 굵기는 숫자로만 지정, 폰트마다 모두 다름 */

  /* Regular */
  font-weight: 400;

  /* Medium */
  font-weight: 500;

  /* bold */
  font-weight: 700;

  /* black */
  font-weight: 900;
  font-weight: 400;
}

.main_etc p {
  font-style: italic;
  color: red;
}

8. 텍스트

common.css

/* *: 전체 선택자 */
* {
  /* 바깥 여백 */
  margin: 0;
  /* 안쪽 여백 */
  padding: 0;

  /* padding ,border를 크기 안쪽으로 포함한다. */
  box-sizing: border-box;
}

/* font축약형 사용금지!: font축약형은 숨겨진 여러 속성값이 있으므로 상속 성질이 있으므로 body에 주면 모두 적용*/
/* 시스템 폰트는 한글, 영문 모두 적어야함(맥에서는 한글 인식 불가) */
/* sans-serif: 고딕 */
/* 앞쪽의 폰트가 없을 경우 os별 기본 고딕체로 보여짐 */
/* 폼요소는 기본 폰트가 다르므로 따로 지정한다 */
body,
input,
textarea,
select,
button,
table {
  /* 시스템 폰트 */
  font-family: -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕',
    helvetica, 'Apple SD Gothic Neo', sans-serif;
  /* 본문 기본 크기 */
  font-size: 16px;
  /* 본문 기본 색상 */
  color: #333333;
  /* 본문 줄 간격 */
  line-height: 1.5;
  /* 모바일 디자인에서 영문이 많을 경우 영문을 한글자씩 줄바꿈 */
  word-break: break-all;
}

#wrap {
  height: 1500px;
}

.main_etc {
  /* width: 1200px; */
  height: 500px;
  border: 4px solid red;
  margin: 0 auto;
}

.main_etc h2 {
  /* 한글을 한단어씩 줄바꿈 (큰 제목에 사용함) */
  /* break-word & keep-all 같이 사용 */
  word-break: keep-all;
  /* 단어의 길이가 부모 가로보다 길 경우 한글자씩 내려감 */
  word-wrap: break-word;
  text-align: center;
  font-size: 50px;
  /* 밑줄은 폰트를 따라 적용되며 위치 변경 불가 */
  text-decoration: underline;

  /* 1em : 폰트 크기만큼 벌어진다 */
  /* letter-spacing -> 자간 반드시 em단위로 사용하자 */
  /* fifma에서 -5% -> 0.05em이다 */
  letter-spacing: -0.1em;
}

.main_etc .link_wrap {
  /* 글자 취급요소(인라인, 인라인 블럭) 가운데 정렬 */
  text-align: center;
}

.main_etc .link_wrap a {
  border: 1px solid black;
  display: inline-block;
  /* 좌우로 배치된 인라인 요소의 높이가 다를경우 요소끼리의 수직정렬 */
  vertical-align: middle;
}

.main_etc p {
  /* line-height: 2em; */
  /* 줄 간격 em생략 가능 */
  line-height: 2;
  font-size: 30px;
  /* word-break: break-all; */
}

.main_etc .link_wrap a:nth-child(2) {
  height: 100px;
}

.main_etc .link_wrap a:nth-child(3) {
  height: 80px;
}

.main_etc .button {
  /* 기본 값 */
  /* box-sizing: content-box; */

  display: inline-block;
  width: 100px;
  height: 50px;
  /* padding: 0 20px; */
  border: 10px solid blue;
  /* height: 30px;
  text-align: left; */
  /* 텍스트 좌우 이동 음,양수 가능 */
  text-indent: -20px;
}

[Flutter] - Caret Sign(^)

Sun, 08 Oct 2023 11:16:30 GMT

Caret Sign(^)이란?

Caret Sign(^)은 pubspec.yaml파일의 외부 라이브러리를 임포트 할 때 사용되고, 업데이트로 인해 내 앱이 중단되지 않는 한 Pub의 최신 패키지를 자동으로 사용하고 싶다는 뜻이라고 한다.

Caret Sign(^) 쓰지 않는 경우

Firebase SDK 버전을 유지하고 싶거나 업데이트할 계획이 없는 개발자

코딩 테스트 연습. python(5) - 신규 아이디 추천

Mon, 13 Feb 2023 06:46:41 GMT

컴퓨터 아이콘 제작자: Freepik - Flaticon

문제설명
1단계 new_id의 모든 대문자를 대응되는 소문자로 치환합니다. 2단계 new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거합니다. 3단계 new_id에서 마침표(.)가 2번 이상 연속된 부분을 하나의 마침표(.)로 치환합니다. 4단계 new_id에서 마침표(.)가 처음이나 끝에 위치한다면 제거합니다. 5단계 new_id가 빈 문자열이라면, new_id에 "a"를 대입합니다. 6단계 new_id의 길이가 16자 이상이면, new_id의 첫 15개의 문자를 제외한 나머지 문자들을 모두 제거합니다. 만약 제거 후 마침표(.)가 new_id의 끝에 위치한다면 끝에 위치한 마침표(.) 문자를 제거합니다. 7단계 new_id의 길이가 2자 이하라면, new_id의 마지막 문자를 new_id의 길이가 3이 될 때까지 반복해서 끝에 붙입니다.

제한 사항
new_id는 길이 1 이상 1,000 이하인 문자열입니다. new_id는 알파벳 대문자, 알파벳 소문자, 숫자, 특수문자로 구성되어 있습니다. new_id에 나타날 수 있는 특수문자는 -_.~!@#$%^&*()=+[{]}:?,<>/ 로 한정됩니다.

입출력 예제

입출력 예 설명

입출력 예 #1

문제의 예시와 같습니다.

입출력 예 #2

7단계를 거치는 동안 new_id가 변화하는 과정은 아래와 같습니다.

1단계 변화 없습니다. 2단계 "z-+.^." → "z-.." 3단계 "z-.." → "z-." 4단계 "z-." → "z-" 5단계 변화 없습니다. 6단계 변화 없습니다. 7단계 "z-" → "z--"

입출력 예 #3 7단계를 거치는 동안 new_id가 변화하는 과정은 아래와 같습니다.

1단계 변화 없습니다. 2단계 "=.=" → "." 3단계 변화 없습니다. 4단계 "." → "" (new_id가 빈 문자열이 되었습니다.) 5단계 "" → "a" 6단계 변화 없습니다. 7단계 "a" → "aaa"

Solution 1

def solution(new_id):
    answer = ''
    # 1.소문자로 치환
    new_id = new_id.lower()
    # 2.알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거
    # isalnum() - 알파벳과 숫자로만 구성되었는지 확인
    for a in new_id:
        if a.isalnum() or a in '-_.':
            answer += a

    # 3.마침표(.)가 2번 이상 연속된 부분을 하나의 마침표(.)로 치환
    while '..' in answer:
        answer = answer.replace('..', '.')

    # 4.마침표(.)가 처음이나 끝에 위치한다면 제거
    # answer가 존재하는데 answer 0부터 1까지가 '.'이라면 answer의 1뒤에 있는 것을 가져오겠다.
    # answer가 존재하는데 answer -1부터 0까지가 '.'이라면 answer의 -1뒤에 있는 것을 가져오겠다.
    if answer and answer[0]== '.':
        answer = answer[1:]
    if answer and answer[-1] == '.':
        answer = answer[:-1]
    # 5.빈 문자열이라면, new_id에 "a"를 대입
    if answer == '':
        answer = 'a'
    # 6.길이가 16자 이상이면, new_id의 첫 15개의 문자를 제외한 나머지 문자들을 모두 제거. 
    # 제거 후 마침표(.)가 new_id의 끝에 위치한다면 끝에 위치한 마침표(.) 문자를 제거
    answer = answer[:15]
    if answer[-1] == '.':
        answer = answer[:-1]
    # 7.new_id의 길이가 2자 이하라면, new_id의 마지막 문자를 new_id의 길이가 3이 될 때까지 반복해서 끝에 붙입니다
    while len(answer) < 3:
        answer += answer[-1]
    return answer

코딩 테스트 연습. python(4) - 위장

Wed, 08 Feb 2023 12:04:19 GMT

컴퓨터 아이콘 제작자: Freepik - Flaticon

스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다.

예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다.

스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요.

제한 사항
- clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다.
- 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다.
- 같은 이름을 가진 의상은 존재하지 않습니다.
- clothes의 모든 원소는 문자열로 이루어져 있습니다.
- 모든 문자열의 길이는 1 이상 20 이하인 자연수이고 알파벳 소문자 또는 '_' 로만 이루어져 있습니다.
- 스파이는 하루에 최소 한 개의 의상은 입습니다.

입출력 예제

입출력 예 설명

입출력 예 #1

headgear에 해당하는 의상이 yellow_hat, green_turban이고 eyewear에 해당하는 의상이 blue_sunglasses이므로 아래와 같이 5개의 조합이 가능합니다.

입출력 예 #2

face에 해당하는 의상이 crow_mask, blue_sunglasses, smoky_makeup이므로 아래와 같이 3개의 조합이 가능합니다.

Solution 1(hash map)

# 해시맵 사용
def solution(clothes):
    hashMap = {}
    # clothes의 0번째 인덱스를 cloth, 1번째 인덱스를 type으로 가져온다.
    for cloth, type in clothes:
        # 타입에 대한 해시맵을 만들어주고, 해쉬맵의 타입이 존재하는지를 본 후 타입이 가지고 있었던 value를 가져온다.
        # 0의 의미 - type이 존재하지 않는다면 초기값을 0으로 가져와라.
        hashMap[type] = hashMap.get(type, 0) + 1


    # 입지 않는 경우(none)를 추가하여 모든 조합을 계산
    answer = 1
    for type in hashMap:
        answer *= hashMap[type] + 1


    # 아무 종류의 옷도 입지 않는 경우를 제외.(none과 none일 경우 1가지)
    return answer - 1

Node.js와 mysql 연동 에러 해결

Sat, 21 Jan 2023 10:12:43 GMT

작성 코드

var mysql = require('mysql');
var connection = mysql.createConnection({
  host: 'localhost',
  port: '3000',
  user: 'root',
  password: '',
  database: my_db,
});

connection.connect();

connection.query()


---

- ## 에러 메시지 
>
mysql-error Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client


---

- ## 에러 원인 

#### mysql 패스워드가 공백이라 위의 코드처럼 구현했는데, mysql이 8로 업그레이드되고 패스워드가 caching_sha2_password로 변경되고 난 후 연동이 되지 않는다고 한다.


---

- ## 해결방안
 > ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '1234';
 (비밀번호 변경)

 ---
 ### caching_sha2_password에서 mysql_native_password로 변경 완료
![](https://velog.velcdn.com/images/min_chan/post/bdf900a5-1c0f-466d-a9c1-5bc3b2f2e535/image.png)

---
- ## 결과 ^^*(사진 첨부)


### 앱 화면(데이터 입력) 
![](https://velog.velcdn.com/images/min_chan/post/e1234897-a853-4548-8512-e5c3f58c0487/image.png)

---
### 데이터 베이스 화면
![](https://velog.velcdn.com/images/min_chan/post/4dea78f8-21ed-4456-bbe3-754b091b6bb6/image.png)

---

코딩 테스트 연습. python(3) - 소수찾기

Sat, 21 Jan 2023 09:37:57 GMT

컴퓨터 아이콘 제작자: Freepik - Flaticon

문제 설명

한자리 숫자가 적힌 종이 조각이 흩어져있습니다. 흩어진 종이 조각을 붙여 소수를 몇 개 만들 수 있는지 알아내려 합니다.

각 종이 조각에 적힌 숫자가 적힌 문자열 numbers가 주어졌을 때, 종이 조각으로 만들 수 있는 소수가 몇 개인지 return 하도록 solution 함수를 완성해주세요.

제한 사항

numbers는 길이 1 이상 7 이하인 문자열입니다. numbers는 0~9까지 숫자만으로 이루어져 있습니다. "013"은 0, 1, 3 숫자가 적힌 종이 조각이 흩어져있다는 의미입니다.

입출력 예

입출력 예 설명

입출력 예 #1

[1, 7]으로는 소수 [7, 17, 71]를 만들 수 있습니다.

입출력 예 #2

[0, 1, 1]으로는 소수 [11, 101]를 만들 수 있습니다.

11과 011은 같은 숫자로 취급합니다.

Solution 1(순열을 사용한 풀이)

from itertools import permutations
def solution(numbers):
    prime_set = set()

    # 모든 숫자 조합을 만든다.
    for i in range(len(numbers)):
        # numbers란 스트링값을 리스트로 받으면 각각 따로 분리되어 보여진다. 순열은 순서를 고려하기 때문에 파이썬에서 제공하는 permutations를 사용하면 편하다. i + 1 은 조합의 개수를 말한다.
        per_list = permutations(list(numbers), i + 1)
        # 맵이라는 함수를 사용하여 하나로 엮어준다음 per_list가 가지고있는 조합을 "".join한다음(str.join) int형으로 변환
        per_list = (map(int, map("".join, per_list)))
        # |=  eq)x = x | y, 중복을 제거하기 위해 집합인 set를 사용
        prime_set |=set(per_list)


    # 소수가 아닌 수 0과 1을 prime_set에서 제외
    prime_set -= set(range(0,2))
    # 에라토스테네스의 체를 사용(prime_set의 최댓값에 루트를 씌우고, range의 두번째 인자로 사용하기 위해서 1을 더해준다음 int형으로 형변환(캐스팅)을 해준다.)
    lim = int(max(prime_set) ** 0.5) + 1
    for i in range(2, lim):
        # i*2 부터  max(prime_set)까지 i 간격 만큼 건너뛰면서   
        prime_set -= set(range(i*2, max(prime_set) +1, i))

    return len(prime_set)

코딩 테스트 연습. python(2) - 전화번호 목록

Tue, 17 Jan 2023 16:19:05 GMT

컴퓨터 아이콘 제작자: Freepik - Flaticon

전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다.

- 구조대 : 119 박준영 : 97 674 223 지영석 : 11 9552 4421 전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 solution 함수를 작성해주세요.

제한 사항
phone_book의 길이는 1 이상 1,000,000 이하입니다. 각 전화번호의 길이는 1 이상 20 이하입니다. 같은 전화번호가 중복해서 들어있지 않습니다.

입출력 예제

입출력 예 설명

입출력 예 #1

앞에서 설명한 예와 같습니다.

입출력 예 #2

한 번호가 다른 번호의 접두사인 경우가 없으므로, 답은 true입니다.

입출력 예 #3

첫 번째 전화번호, “12”가 두 번째 전화번호 “123”의 접두사입니다. 따라서 답은 false입니다.

Solution 1(Sort & Loop)

def solution(phone_book):
     # 전화번호 sort
     phone_book.sort()
     # sort 한 전화번호를 2개씩 확인해서 접두어인지 본다.
     for i in range(len(phone_book) -1):
         if phone_book[i+1].startswith(phone_book[i]):
             return False
     return True

Solution 2(Zip)

def solution(phone_book):
    # 전화번호 sort
    phone_book.sort()

    # 자료형을 묶어 하나의 튜플로 만들어준다.
    for x, y in zip(phone_book, phone_book[1:]):
        if y.startswith(x):
            return False

    return True

코딩 테스트 연습. python(1) - 완주하지 못한 선수

Sun, 15 Jan 2023 14:37:36 GMT

컴퓨터 아이콘 제작자: Freepik - Flaticon

문제 설명

수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.

마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.

제한사항

마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다.
completion의 길이는 participant의 길이보다 1 작습니다.
참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다.

입출력 예
입출력 예 설명

예제 #1 "leo"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #2 "vinko"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #3 "mislav"는 참여자 명단에는 두 명이 있지만, 완주자 명단에는 한 명밖에 없기 때문에 한명은 완주하지 못했습니다.

Solution 1(Sort & length)

def solution(participant, completion):
    #각 리스트 정렬
    participant.sort()
    completion.sort()

    #completion list의 length만큼 반복문을 사용하여  particioant에만 존재하는 한 명 찾기 
    for i in range(len(completion)):
        if participant[i] != completion[i]:
            return participant[i]

    # completion list를 다돌고 나서도 한 명을 못찾을 경우 cparticipant list의 마지막 사람이 완주하지 못한 한명이다.
    return participant[-1]

Solution 2(hash활용)

def solution(participant, completion):

    hashDict = {}
    sumHash = 0
    # particioant의 리스트의 hash를 구하고, 합을 구한다.
    # ex) hashDict안의 value 값이 leo = 3, kiki = 7, eden = 13이 주어졌다고 가정하고 그 것들의 합(sumHash) = 18이 된다.

    for p in participant:
        hashDict[hash(p)] = p
        sumHash += hash(p)

    # completion list의 hash를 빼준다.
    # ex) kiki = 7, eden = 13을 더한 것과의 차이를 구한다.  
    for c in completion:
        sumHash -= hash(c)

    # 남은 값이 완주하지 못한 선수의 hash값이 된다.
    return hashDict[sumHash]

Solution 3(Counter활용)

 # Counter는 colletions라는 모듈안의 하나의 클래스로 리스트 형태를 딕셔너리(갯수) 형태로 변환한다.
 from collections import Counter

 def solution(participant, completion):
     # participant의 counter를 구한다.
     p_counter = Counter(participant)

     # completion의 카운터를 구한다.
     c_counter = Counter(completion)

     # 두 카운터의 차를 구하고 key를 구한다.
     answer = p_counter - c_counter
     return list(answer.keys())[0]

Kotlin으로 navController 설정 오류 해결

Fri, 23 Dec 2022 14:52:18 GMT

에러 발생 코드

var navController : NavController navController = nav_host_fragment.findNavController()

에러 정정 코드

var navController : NavController navController = findNavController(R.id.nav_host_fragment)

flutter로 간단한 flappy bird 구현(1)

Tue, 22 Nov 2022 12:18:18 GMT

플래피 버드 게임

변수 설정

homepage.dart

static double birdY = 0;
double initialPos = birdY;
double height = 0;
double time = 0;
double gravity = -4.9; // how strong the gravity is
double velocity = 3.5; // how strong the jump is
double birdWidth = 0.1; // out of 2, 2 being the entire width of the screen
double birdHeight = 0.1; /

방벽 구현

barrier.dart

class MyBarrier extends StatelessWidget { final size;

MyBarrier({this.size});

@override Widget build(BuildContext context) { return Container(

 width: 100,
 height: size,
 decoration: BoxDecoration(
   color: Colors.green,
   border: Border.all(width: 10, color: Colors.greenAccent),
   borderRadius: BorderRadius.circular(15)
 ));

} }

방벽을 4개로 설정

homepage.dart

AnimatedContainer(
                    duration: Duration(milliseconds: 0),
                    alignment: Alignment(barrierXone, 1.1),
                    child: MyBarrier(
                      size: 200.0,
                    ),
                  ),
                  AnimatedContainer(
                    duration: Duration(milliseconds: 0),
                    alignment: Alignment(barrierXone, -1.1),
                    child: MyBarrier(
                      size: 200.0,
                    ),
                  ),
                  AnimatedContainer(
                    duration: Duration(milliseconds: 0),
                    alignment: Alignment(barrierXtwo, 1.1),
                    child: MyBarrier(
                      size: 150.0,
                    ),
                  ),
                  AnimatedContainer(
                    duration: Duration(milliseconds: 0),
                    alignment: Alignment(barrierXtwo, -1.1),
                    child: MyBarrier(
                      size: 250.0,
                    ),
                  ),

새가 부딪혔을 경우

homepage.dart

bool birdIsDead() {
if (birdY < -1 || birdY > 1) {
  return true;
}

새가 죽었을 경우

homepage.dart

  // check if bird is dead
  if (birdIsDead()) {
    timer.cancel();
    gameHasStarted = false;
    _showDialog();
  }

사진

내용 정리

중력과 가속도를 설정해주어 새가 정교하게 움직일 수 있게하고, Y축으로 움직이는새가 -1,1에 만났을 경우 게임이 종료된다. 방벽은 4개로 구현하고, X축을 barrierXone으로 설정해주어 방벽이 움직이게 한다.

실패한 부분

스코어 기록
방벽 충돌 기능

flutter로 앱개발하기(2)

Sat, 19 Nov 2022 14:24:24 GMT

학생증을 찍어서 신분 확인 단계 구현하는 중

이미지 피커를 사용한 카메라 기능 구현

SafeArea(
          child: Column(
            children: [

              ElevatedButton.icon(
                onPressed: () {
                  getImage(ImageSource.camera);
                },
                icon: Icon(Icons.camera_alt_outlined),
                label: Text(
                  '학생증을 찍어주세요',
                  style: TextStyle(
                      fontFamily: 'salt',
                      color: Colors.white,
                      fontSize: 30),
                ),
              ),


              Container(
                color: Colors.white,
                width: 300,
                height: 200,
                child: Center(
                    child: _image == null
                        ? Text(
                            '학생증 사진이 없어요 ㅠㅠ.',
                            style: TextStyle(
                                fontFamily: 'salt',
                                color: Colors.black,
                                fontSize: 30),
                          )
                        : Image.file(File(_image!.path))),
              ),

추가해야 할 기능

카메라로 사진을 찍은 뒤 사진이 들어가긴 하나 컨테이너에 사진 크기를 어떻게하면 맞출 수 있을까 생각해보자.
'끝~' 버튼을 눌렀을 경우 위의 항목이 잘못되거나 빠진 부분이 있을경우 경고창이 뜨며 실패한다. 위의 항목이 잘 입력되면 끝버튼이 눌리고 url서버로 전송시킨다. 그리고 가입신청이 완료 되었다는 문구가 나오게 만들어보자 ^^

min_chan.log

CSS & HTML 기초(9)

21.포스코건설(반응형, 뉴스룸 말줄임 처리,푸터)

메인비디오

CSS & HTML 기초(10)

22.넥슨(가변 레이아웃,이미지 커지며그림자와 fade효과,아이콘 공통클래스,한 줄 말줄임

전체게임

CSS & HTML 기초(8)

20. 코리아 리서치 인터내셔널(반응형,2단가로메뉴,video,css캐싱방지)

메인비디오

CSS & HTML 기초(7)

19.아웃백 헤더(2단세로메뉴, white-space, nowrap, visiblity hidden 페이드 효과)

메인 슬라이더

CSS & HTML 기초(6)

18. Position(레이어, relative, absolute, fixed)

18-1. Position(레이어, Sticky)

Business network

건자재 유통

배운점

1. position-sticky가 적용 안되는 경우

2. 단위가 없는 css

CSS & HTML 기초(5)

16. 기아 멤버스 하단

All about Kia

17.네이버(검색 필드)

CSS & HTML 기초(4)

14.아웃백(header, depth1)구현

main banner

15. 한화 생명(큰 이미지 & 꾸미는 이미지, 리뉴얼 전 주소)구현

01월의 추천상품

CSS & HTML 기초(3)

10. display 특성

chatGPT

11. 교원 라이프 하단메뉴 구현

기타 서비스

회사소개

교원라이프 소식

교원예움 장례식장

자주하는 질문

12. overflow

13. 웹 폰트 연결

CSS & HTML 기초(2)

9. CJ도너스캠프 퍼블리싱

HTML

main visual

꿈 키움 지원사업

청소년 문화동아리

꿈키움 아카데미

CSS

CSS & HTML 기초(1)

1. HTML 기본 태그

섹션에는 반드시 하나이상의 제목 태그가 필요

2. 절대 경로 설정

3. CSS 적용하기

4. CSS 선택자 우선 순위

6. 가상 클래스,요소 선택자

섹션 제목

7. 폰트

8. 텍스트

[Flutter] - Caret Sign(^)

Caret Sign(^)이란?

Caret Sign(^) 쓰지 않는 경우

코딩 테스트 연습. python(5) - 신규 아이디 추천

문제설명

제한 사항

입출력 예제

입출력 예 설명

입출력 예 #1

입출력 예 #2

Solution 1

코딩 테스트 연습. python(4) - 위장

제한 사항

입출력 예제

입출력 예 설명

입출력 예 #1

입출력 예 #2

Solution 1(hash map)

Node.js와 mysql 연동 에러 해결

작성 코드

코딩 테스트 연습. python(3) - 소수찾기