728x90 반응형 전체 글130 [CSS] border/ margin/ padding 예제 Box Model - 요소에 부피감을 결정하는 개념 - 웹페이지의 레이아웃 및 디자인 설계시 Margin 마진 상쇄현상 : 마진 영역이 겹치는 경우에 둘중에 더 큰 마진영역만 잡힘 Margin 사용법 Margin 사용한 예제 padding : 테두리를 기준으로 요소의 안쪽여백 지정 border : 테두리 굵기, 선타입, 선색깔 속성 조절 2022. 10. 4. [CSS] display(block,inline,inline-block,none )활용도 / grid / 관련 게임 시멘틱 태그 : HEADER, SECTION, ARTICLE, NAV, ASIDE, FOOTER display 속성 차이 (태그별) display 활용도 block : 크기 지정 가능 ( height, width) inline : 크기 지정 불가능(한 줄에 정렬) inline - block : 크기 지정 가능 ( 한 줄에 여러개 가능) none : 화면에 안보이게 해줌 ( f12 눌러서 속성 확인 가능) 하이퍼링크에 마우스 올리면 주소 나오게 하는 실습 display : grid 2차원 (행과 열)의 레이아웃 시스템 제공하는 속성 자세한 설명 나와있는 사이트 https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 .. 2022. 10. 4. [CSS]계층 선택자 / 반응 선택자 계층 선택자 - 자식 선택자 는 자손 선택자를 포함하고 있음 - 바로 밑에 있는 선택자만 자손/자식 선택자 - 그 외엔 자식선택자 자손 선택자 " "(띄어쓰기) 자식 선택자 > 형제(근접후행) 선택자 + 형제(후행) 선택자 ~ 사용 예제 li+li 는 첫번째 li 바로 뒤 li만 색깔 변경(두번째 li만) li~li 는 첫 번째 li 제외한 뒤에 오는 모든 li 색상 변경 크기 단위 px em : px*2 em : px*3 폰트의 기본 크기 : 16px 같은 선택자 내에 속성이 2개면 아래 속성이 적용됨 반응 선택자 : 사용자의 반응으로 생성되는 특정한 상태를 선택 ☆div☆ : 웹페이지에서 구역을 잡아줄 때 사용함 active(클릭하고 있을 때) - div클릭하고 있을 때 p태그 변경 - hover(마.. 2022. 10. 1. [css] 아이디 선택자 / 클래스 선택자 정의, 사용방법 아이디 선택자 / 클래스 선택자 아이디 선택자 : #기호로 표시됨/ 특정한 요소 선택 (HTML구조의 공간분할을 적용할 때) - body 태그 안에 한개만 존재 - 정의한 후 한 페이지에 한번만 사용 ( 웹 표준 테스트 오류발생) - 한 페이지에 한번만 들어가는 로고, 상단메뉴, 하단정보 등 스타일 정의할 때 클래스 선택자 : 마침표 기호로 표시되며 특정한 요소 선택 (공동되는 스타일 적용할 경우) - 여러 개의 태그에 동시에 적용 - 몇 번이고 재사용 가능 - 반복적으로 사용되는 스타일 - 세부 스타일 정의할 때 사용 css주석 방법 ctrl + / 아이디 선택자 사용 방법 1. body 에서 id이름과 class이름 지정 후 2. head 에 id일 땐 #아이디이름 클래스일 땐 .클래스이름 아이디 선.. 2022. 10. 1. [CSS] HTML에 CSS 작성 방법 / 구글 폰트 사용방법 CSS SELECT(선택자) h1{ color : red ; (스타일속성) (속성값) } html문서 내에 css 작성 ( head에 style태그 생성) 색상 추가 폰트, 글씨크기, 기울임체 굵은글씨/밑줄 -> 같은 태그면 동일하게 지정됨 구글폰트에서 폰트 가져오기 1. 사이트 들어가서 언어 -> korean으로 설정후 원하는 폰트 들어가기 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 아래에 내리다 보면 보이는 Regular 400 + 에서 + 클릭 3. 는 복붙해서 title위에 head안에만 붙여넣기 는 복붙해서 .. 2022. 10. 1. [HTML]입력양식태그 ID : PW : 취미 독서 운동 영화보기 성별 남 여 a b c 2022. 9. 30. [HTML] 테이블 태그 셀 병합 / 입력양식 태그 종류 / 사용법 테이블태그 셀병합 가로 병합 : colspan 세로 병합: rowspan table 생성 - border="1" 같이 삽입하여 테이블 모양 잡기 tr태그 넣기 tr태그 넣을 때, 병합된것을 생각하지않고 최대한 많이 넣기! 행별 이름 - tr 생성 후 이름삽입 병합된 셀은 가장 윗쪽에 있는 행에 넣어두기 td 삽입 th에 셀 병합할 colspan="합칠개수" 삽입 td에 셀 병합할 rowspan="합칠개수" 삽입 테이블 태그 셀병합 2 입력양식태그 action : 입력 데이터의 전달 위치 지정 method : 입력 데이터의 전달 방식 지정 (get/post) name 서버를 보내기 위한 속성 value : 각자의 분류로 다르게 입력 (개인) name : 같은 란이면 똑같은 분류로 작성 (그룹화) 입력창 -.. 2022. 9. 30. [HTML] 리스트 태그/디테일 태그/포함 태그/테이블 태그 사용법 리스트태그 : 목록들 넣기 : 번호 있음 : 번호 없이 모양 ( 모양에 따라 type= "square" / " round") 디테일 태그 : 숨길 내용 삽입 : details 안에 삽입 , 사이에 제목 넣기 포함태그 : 다른페이지 현제페이지로 삽입 유튜브 : 공유 -> 퍼가기 -> 복사 해서 그대로 붙여넣기 자동 재생 : 링크바로뒤에 ?autoplay = 1 음소거 : mute=1 자동재생 + 음소거 : ?autoplay=1&mute=1 테이블태그 행 개수 표현 : tr -> 가장 먼저 만들기 ( tr *개수) 셀을 넣을 때 제목이다 : th (th * 개수) 셀을 넣을 때 그냥 이름 : td caption : 테이블 제목 테이블 가운데로 옮겨서 정렬 : table 란에 align="center" 삽입 .. 2022. 9. 30. [자격증]sns광고마케터1급 자격증/시험일정/공부법/합격후기 안뇽하세여 2022년 08월 27일 토요일에 응시한 SNS광고마케터 1급 자격증을 포스팅 할 예정입니당 시험 내용 캡쳐 출처는 아래 링크확인! https://www.ihd.or.kr/introducesubject10.do KAIT 자격검정 정보통신기술자격검정 정보통신기술자격검정(KAIT-CP)은 방송통신발전기본법에 근거해서 설립한 한국정보통신진흥협회(KAIT)에서 운영하는 자격제도로서 ICT분야별로 기본적인 소양부터 전문기 www.ihd.or.kr KAIT 자격검정 정보통신기술자격검정 정보통신기술자격검정(KAIT-CP)은 방송통신발전기본법에 근거해서 설립한 한국정보통신진흥협회(KAIT)에서 운영하는 자격제도로서 ICT분야별로 기본적인 소양부터 전문기술까지 인적자원의 개발 및 평가를 통해 실생활과 산업현장.. 2022. 9. 30. [자격증]컴퓨터활용능력1급 합격후기 / 공부법 / 필기,실기 합격 안뇽하세여 들어온 김에 다사다난했던 컴활1급 합격까지의 과정 보구가세요 *^^* 앗 ㅎㅎ 사실 딴지 4개월 지남 필기는 1년 넘음 ^3^ 합격증 시험 일정 및 신청방법 시험일정은 상시로 있어서 https://license.korcham.net/indexmain.jsp 대한상공회의소 자격평가사업단 대한상공회의소채용필기시험 모의테스트 취업준비생이 NCS직업기초능력/직무적성을 사전에 진단하고 채용필기시험을 대비할 수 있는 모의테스트입니다. 바로가기 --> 바로가기 --> 고객센터 FAQ license.korcham.net 본인 해당 지역 상공회의소 검색하여 들어가서 원하는 시간 및 일정에 신청하면 되세요! 필기 공부법 필기 먼저 응시해야해서 합격후기 엄청 찾아봤는데 보통 결과가 바로나오지만 자리운빨이 심하다해.. 2022. 9. 29. [자격증] 웹디자인 기능사 필기 시험일정/시험공부법/합격후기 안냥하세여 오늘은 웹디자인 기능사에 대해 말해볼거에요!! 시험일정 기능사 시험에 필기시험기간이 왤케기나 하시죠?? 저 날짜중에 편한 날짜로 신청해서 보면됩니당! 개이듁 앗 제가본건 4회라 올해는 끝났어요 :) 접수방법 https://www.q-net.or.kr/man001.do?&gSite=Q&gId= Q-net 자격의 모든것 www.q-net.or.kr 큐넷 앱을 먼저 깔고 가입을 해줍니당 원하는 기능사와 날짜를 신청해주면 원서접수내역에 뜰거에요! 8/30으로 신청했다가 개인사정으로 취소하구 다른날짜로 예매.. 아쉽게도 시험일자 변경은 안되는것같더라구요 ,,, 내 반값 ㅠ 하하 9/3로 다시 신청했어요! 거의 5일을 더 추가공부했습니당 (사실상 8/30부터 공부시작ㅋㅋㅋ) 흐아 광주에서 기능사 시험보는.. 2022. 9. 29. [파이썬] JUPYTER설치 및 기본 단축키 Jupyter설치 방법(Anaconda) https://www.anaconda.com/ Anaconda | The World's Most Popular Data Science Platform Anaconda is the birthplace of Python data science. We are a movement of data scientists, data-driven enterprises, and open source communities. www.anaconda.com 다운로드 후 window 검색창에 jupyter 검색 후 실행 파이썬 단축키, 주석 및 마크다운 사용법 문자열에서 사용하는 이스케이프 코드 종류 2022. 9. 29. [HTML] 앵커태그/아이콘 삽입/ 아이콘,폰트 사이트 추천 1. 앵커태그 (내가 원하는 페이지로 이동가능) 하이퍼텍스트 만들때 사용 2. 내가 원하는 위치로 이동 아이콘 삽입 1. google fonts 사이트 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com google fonts - 아이콘 https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file wi.. 2022. 9. 28. [HTML] 자동 단축기, HTML 기본 태그 종류 자동 단축기 1. html 문서 html 작성하면 밑에 나오는 html:5 선택하기 -> 더 간단히 하는 방법 : ! + enter 2. html주석 하면 자동으로 생성 기본 실행 코드 기본 태그 종류 제목 : html 문서 본문 내 제목 표현 태그 (h1~h6) 2022. 9. 28. VisualStudio Code 설치방법 / HTML 기초문법 VisualStudio Code란? Visual Studio Code : 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스코드 편집기 HTML이란? (Hyper Text Markup Language) : 웹페이지에 정보를 담아 표시하기 위한 마크업 언어 여기서, Hyper Text 란? -> 현재 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 Markup이란? -> 어딘가에 표시를 해두는 것 설치방법 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and de.. 2022. 9. 28. 이전 1 ··· 3 4 5 6 7 8 9 다음 728x90 반응형
