전체 글 (50) 썸네일형 리스트형 [복사허용] 베텔기우스(ベテルギウス) - 유우리(優里) 가사 해석 ATIST - 유우리(優里)TITLE - 베텔기우스(ベテルギウス)아랍어로 '알자우자의 손'을 의미하는 단어로 라틴어에서 유례함오리온자리 7개 별중 하나 이고 지구에서 볼때 엄청나게 밝아졌다가 어두워짐을 반복하며시기는 알수 없지만 초신성의 폭발이 임박했음을 예측하는 전문가들도있다.https://namu.wiki/w/%EB%B2%A0%ED%85%94%EA%B2%8C%EC%9A%B0%EC%8A%A4 ">HTML 삽입미리보기할 수 없는 소스 그런데 번역은 틀린 부분 많습니다 지적해주시면 참고하겠습니다.(파파고,구글번역기참고)[가사 해석 ]空にある何かを見つめてたら하늘에 있는 무언가를 바라보다가それは 星だって 君がお しえてくれた그건 별이라고 네가 알려주었어まるで それは 僕らみ たいに 寄り添ってる마치 .. [Bootstrap]step.2 Bootstrap 템플릿 활용하기 [템플릿 활용하기] 샘플의 아래내용을 하나씩 변경합니다. a 태그들은 모두 수정합니다. 저자권없는 무료 이미지를 찾는방법 무료이미지 사용하기 by 372 .. [Bootstrap]step.1 Bootstrap 사용 방법과 이해 [Bootstrap] 사용방법 우선 다운로드 합니다.https://getbootstrap.com/docs/5.3/getting-started/download/ 다운로드 완료후 css폴더를 열어보면 아래와같이 CSS파일들이 들어있다 열어보면 엄청 많은 클래스가 정의되어있다 bootstrap 템플릿 사이트https://shapebootstrap.net/ Home - ShapeBootstrapA web designer designs websites and applications. His visual decisions directly affect brand perception and sometimes sales. That’s why the market needs talented web designe.. [Bootstrap]step.2 Bootstrap 템플릿 활용하기 [템플릿 활용하기] 샘플의 아래내용을 하나씩 변경합니다. a 태그들은 모두 수정합니다. 저자권없는 무료 이미지를 찾는방법 무료이미지 사용하기 by 372 .. [CSS]step.14 CSS 클론 코딩(1) / CSS 쇼밍몰꾸미기 [실습예제 - 완성본] [실습예제 - 수정 전] [실습예제 - 수정 ] 상단 제목 및 소개 내용 수정수정 샘플 1차 수정 - 텍스트 입력 단계 jarry blog 상품선물하기 좋은 상품을 판매하는 블로그입니다.featuerd 2차 수정 - 해당 텍스트 내용을 가운데 정렬 시키기기존코드 확인결과 를 통해 상품들의 가운데 정렬을 해놨음 그대로 가져다가 텍스트에도 적용시킴 jarry blog 상품선물하기 좋은 상품을 판매하는 블로그입니다.featuerd 각 행마다 태그 적용하여 양식을 다르게 설정할 수 있다. 선물하기 좋은 상품을 판매하는 블로그입니다. jarry blog 상품featuerd div 마다 class를 적용하여 디자인할때 사용한다... [CSS]step.13 CSS 중급 position 이해 [position] - 특정 태그를 지정하고싶을때 사용 top / bottom / left / rightposition: fixed; // 상단에 고정 시킬때 사용함 .box2 { background: #3B9CD9; // 파란색 상자 position: fixed; // 상단에 고정 시킬때 사용함 top: 50px; // 위에서 50px left: 400px; // 왼쪽에서 400px 부터 시작함 } [플러그인 추천 beauty ] - 코드를 보기 좋게 자동으로 indetation(들여쓰기 정렬) 해주는 기능 드래그 선택후 cmd + shfit + B( 키보드) .. [CSS]step.12 HTML5 시멘틱웹 / css 적용하기 실습 [semantic web] 웹문서를 구조화 하여 의미 있는 내용을 탐색하게 만드는 태그들 사용안해도 문제 없지만 검색엔진에서 좀 더 정확한 추천기능과 크롤링에 적용될수 있다. 검색기능 순서 1.크롤러(웹페이지를 자동으로 읽는 프로그램) -> 2.HTML 문서 분석 -> 3.검색을 위한 저장 일반적인 태그만 쓰면 어떤 태그가 중요한지, 어느부분이 제목이고 내용인지 검색시 추천하기 어렵다.[시멘틱웹 실습예제 - 수정 전 ][ nav - 수정 ] - 최상단 Home Contract Home Contact "home Contact" 아래위 간격조정이 필요함(padding설정) nav{ text-align: right; font-size: 1.4em; .. [블로그만들기]티스토리 poster 스킨 메뉴고정시키기 / 메뉴 글자 크기조절 poster 스킨으로 블로그를 시작해보신분들을 알겠지만 수정해야할 부분이 몇가지있다. 오늘은 그중 메뉴 고정에 대해 시도해보았다 아래 출처를 참고하였다산책하는 댕발자님 블로그https://built.tistory.com/58 [티스토리 블로그 poster스킨 - 수정전]그래서 오늘 수정해 볼 것은 3가지 이다1. 왼쪽에 메뉴 고정2. 메뉴 바 넓이 조정하기3. 메뉴 각종 폰트사이즈 수정 [ 1. 메뉴 고정시키기 ]관리자 - 스킨편집 - HTML편집기 - CSS 항목에서 아래 코드를 삽입한다.@media (min-width: 1400px) {#header .menu { left: 0px; }#header .menu.on { left: -300px; }} 왼쪽에 0px 위치를 고정하고 - 300p.. [CSS]step.11 HTML 중급CSS 실습예제 [실습예제 - 최종 샘플][실습예제 - 기존] [실습예제 - display:flex 적용].flexcard{ display:flex; // 추가} .flexdesc{ display:flex; // 추가 } [실습예제 flex-direction: column 적용].flexcard{ display:flex; } .flexdesc{ display:flex; flex-direction: column; //추가 } [실습예제 justify-content: center 적용].flexcard{ display:flex; }.flexdesc{ display:flex; flex-direction: column; justify-content: center; //추.. [CSS]step.10 중급 css flex box [flex box] 웹페이지 작성시 수평정렬이 어려움상위 flex coutainer / 하위 flex item 들로 구성됨flex coutainer 안에 flex item을 넣어서 수평정렬하는 문법임 [flex box 주요 프로퍼티] display : flex(block 특성의 container를 정의)flexbox를 만들기위해 정의함 해당 속성이 적용된 요소는 flex container가 되고 자식요소는 flex item이 된다. flex-direction(정렬 방향을 결정): row( 좌우 정렬) column(위 아래 수직 정렬) jstify-content(정렬 방법 설정): flex-start(왼쪽부터,수평정렬) / center(가운데정렬) .. 이전 1 2 3 4 5 다음
