IT
레이아웃 연습하기 / Z 레이아웃
레이아웃 연습하기 / Z 레이아웃
2022.06.28# 사람의 눈이 많이 가는데 컨텐츠를 배치:): F레이아웃 # F레이아웃을 가지고있는 web site많음~ 요즘 트렌드는 메인에 큰 이미지라던지 큰 동영상이라던지.. 그런것들 배치하는 구조+_+: Z레이아웃 F보다 최근들어 더 많이 만들어지고 있다.웬만한 트렌드를 반영하는 웹사이트 (특히, 반응형 웹)들은carousel을 쓰면서 이미지를 크게 배치하고 있다. 사람들의 시선을 끌기위해. # 그런데 하나만 배치하기에는 그 공간이 아까우니까...여러개를 배치할 수 있는 방법으로 버튼형식 -> indicator button. 주력하는 아이템 or 프로모션을 할때최대한 많은 참여를 끌기위해(창출되는 이익을 위해)상단에 carousel로 배치하고있는것:) 레이아웃을 짤 때,어떤 레이아웃을 짤건지도 생각해봐야하는..
float 속성 활용하기 / display 속성 / 코딩 레이아웃 연습
float 속성 활용하기 / display 속성 / 코딩 레이아웃 연습
2022.06.27[ float 속성을 활용한 레이아웃 ] first second first second [ float를 활용한 이미지 배치 ] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, quidem, mollitia! Iusto assumenda non eos ex ut illo, eaque quots sit neque odit molestiae aliquam dignissimos libero amet placeat, dolor sequi hic ad illum possimus reicie..
속성 선택자 / 후손 및 자손 선택자 / 동위선택자 / float
속성 선택자 / 후손 및 자손 선택자 / 동위선택자 / float
2022.06.26# font-size: 0.9em 소수점으로 들어가면 글씨 크기를 작게 할 수 있다(: # 속성 선택자: 말그대로 속성을 선택하는 것! # id를 붙여서 쓰는 사람도 있고, 속성 선택자를 쓰는 경우도 있는데기호에 따라서~but, input태그가 100개인경우, 전화번호에 있는 색상만 바꾸고 싶다?물론 기호에 따라 방법이 다르겠지만,일일이 class명 주지 않아도 이미 있는 속성을 선택하는게 빠르기에속성 선택자를 쓰는게 낫다. # 선택자에서도 속성을 선택할 때에는type=""type=''type=외따옴표든 쌍따옴표든 안넣든, 상관없다. # 속성선택자는 동일한 속성이 많이 있을때 활용하기 괜찮은 선택자다. 이름: 아이디: 비밀번호: 전화번..
CSS stylesheet : 외부스타일시트 연결 (코딩복습 / 독학)
CSS stylesheet : 외부스타일시트 연결 (코딩복습 / 독학)
2022.06.251. content menu1 menu2 menu3 menu4 menu5 menu1 menu2 menu3 menu4 menu5 test 3. heading1 heading2 heading3 heading4 heading5 heading6
Coding study : CSS / margin:0 auto;
Coding study : CSS / margin:0 auto;
2022.06.24# css: cascading style sheet의 약자:)# cascading: 연속적인, 계층적인, 폭포수 html안에 head body가 있고 body안에div나 hi가 있고 hi안에 p태그가 있고.. 이런것 계층적인 구조다~ 나중에 제이쿼리 자바스크립트에 들어가면 더 중요한 개념이다. 자바스크립트에서 돔트리 구조. 그 안으로 접근을 해야한다.지금 하는 것보다 더 안으로 더더더안으로 접근을 해야하기에... 마찬가지로 css에서도 원하는 텍스트 색을 바꾸려면 얘를 선택하기 위해서 구조적 선택자를 이용해서 선택을 하기도한다.그래서 계층적인 구조를 통해 선택자를 선택해서 바꾼다가 cascading! # ID 선택자 vs. class선택자 둘중 선택하는건 본인의 기호이지만, 거의 id보단 class를 많..
CSS / 인라인방식 / 내부선언방식 / 외부선언방식 / 선택자
CSS / 인라인방식 / 내부선언방식 / 외부선언방식 / 선택자
2022.06.24# CSS: 디자인을 위한 언어Cascading Style sheets cascading: 연속적인, 폭포수연속적으로 안에를 선택할 수 있는 것!그런 시트를 만들어봅시다아> # 스타일이라는 태그. # css 선언방식 html을 짤때도!해서 DOCTYPE이 선언하는 거인데CSS에도 선언하는 방식이 있다.. 1) In-Line 인라인 방식:사이에html tag에 직접 style속성 값을 서술.안녕하세요,만나서 반갑습니다~ # 인라인 방식: 하나의 줄에 다 있다.but 잘 안쓸것 나중에, 한번에 바꿔야 하는 경우가 있으니까.그러면, 각각의 태그를 일일이 다 찾아서 바꿔야 하기 때문에 불편하다.수정하는데 있어서 엄청난 시간과 노력이 필요하기에수정하기 쉽게 기술해주는 게 좋기 때문에그렇게 쓰기 위한 방식이 내부선..
코딩연습 / 복습 / 공부 : semantic tag
코딩연습 / 복습 / 공부 : semantic tag
2022.06.23# 태그를 한꺼번에 찾아서 처리하고싶을때영역 지정해서 카피하고 ctrl+f 하면,복사한 태그가 검색어에 들어가고,find 버튼누르면 동일한 태그를 알려준다. # 그런데 find all 하면 전부찾아줌!다찾고싶으면,div>앞에 꺽새를 안넣고 찾아주면 다 찾을 수 있다. # h1태그에 넣는 배경색과div 스타일에 넣는 배경색은차이가 조금 있다. ***div로 묶여있는 애들은 그룹화가 되어있어서그룹에 배경색을 줄 수 있다. # 그리고 상단부분과 왼쪽의 공간부분은웹페이지에 자동으로default값으로 주고있는 여백이다. # div 스타일에서텍스트 컬러놓고싶으면div color다.***text color아님. # 배포할 수 있는 내용:section tag가 아닌 article tag # 의미가 잘 들어나도록 짜는 ..
div / span / semantic tag
div / span / semantic tag
2022.06.22# input태그는 단일태그라서 끝태그 없지만,textarea는 시작태그와 끝태그가 있다. # method방식은 두가지 방식get: 노출method: 암호화 # form태그의 action을 임시태그로 #으로 처리해도되구~나중에 더 배워서 원하는 타입으로처리! # 꼭 하나를 선택해야하는 type: radioradio 타입에서 중요한건 name! 동일한 name을 넣어줘야지그룹으로 인식함. # 다중 선택 type: checkbox이때도 마찬가지로 하나의 그룹으로 알려주려면 name동일하게~check한값이 전송되려면 text와 관련된 value값 넣어줄것! 여기서 기본적으로 처음에 체크되게하려면 checked.# 토글버튼 눌러서 선택하게 하려면input tag가 아니라 select tag!그 안에option ..
audio / form / input / radio / select / checkbox / label 태그연습
audio / form / input / radio / select / checkbox / label 태그연습
2022.06.211. 2. 3. 당신의 정보를 입력해주세요. last name: first name: 아이디: 비밀번호: 건의사항을 적어주세요 4. 당신의 사진을 올려주세요 동생의 사진을 올려주세요 5. 성별을 선택해 주세요 남자 여자 당신의 국적을 하나만 선택해 주세요 한국 미국 중국 6. 사용이 가능한 언어를..
다양한 태그들 연습 p / ol / ul / li / dd / dt / tr / td / th
다양한 태그들 연습 p / ol / ul / li / dd / dt / tr / td / th
2022.06.201.h1태그입니다.h2태그입니다.h3태그입니다.h4태그입니다.h5태그입니다.h6태그입니다.h7태그입니다.h8태그입니다.h1태그입니다.h2태그입니다.h3태그입니다.h4태그입니다.h5태그입니다.h6태그입니다.p태그의 활용Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic ipsam animi assumenda a ex, perspiciatis, aliquid omnis blanditiis reprehenderit voluptates eius doloribus facere accusamus non fugit opt..
서브라임 에밋 Emmet / html attribute, list, table
서브라임 에밋 Emmet / html attribute, list, table
2022.06.19# Html 태그 : html 문서를 구성하고 있는요소(: 태그에는 이름과 속성이 있다.# Emmet을 이용해서 빠르게 코딩하는 법!h2{h2태그입니다} 태그하면, 텍스트까지 같이 뽑아낼수있다(: # h$*6 : 코딩을 빠르게하는 Emmet을 쓰는 방법이다. # h$*6을 하면 h1~h6태그가 완성된다.그 안에 텍스트만 주면 될것!# ctrl 과 alt를 동시에 누르고 화살표를 밑으로 내리면 커서가 동시에 깜박임.(다만, 윈도우에서만 작용.. 그렇담 맥은 ㅠㅠ?=>알아볼것!)그 상태에서 텍스트를 입력하면, 동시에 h1~h6태그안에 텍스트가 동일하게 입력됨.커서를 빠져나오고싶으면 esc누르면 된다. # 컨트롤을 누르면서 화살표를 하면, 단어만큼 띄어짐. # 텍스트를 뽑아낼때 기호: 중가로. # 그래서, h..
서브라임 텍스트 Sublime text3 다운 및 플러그인 설치
서브라임 텍스트 Sublime text3 다운 및 플러그인 설치
2022.06.18# 서브라임 설치 주소 http://www.sublimetext.com/3# 플러그인 설치를 할 수 있게 세팅https://packagecontrol.io/위 주소의 메인페이지에 있는 install now 버튼을 클릭하고 sublime text 3 영역 안에 있는 내용을 복사한다.서브라임에서 view>show console(ctrl+')클릭하여 콘솔창 열고 붙여넣기.서브라임 툴을 열고 tools>command pallete(ctrl+shift+p)를 눌러 텍스트입력창을 띄우고 install 을 입력하여 설치하고 싶은 플러그인 이름을 입력! # emmet : 코딩 빠르게 해주는 플러그인# bracket highlighter: 쌍으로 존재해야 하는 코드를 하이라이트로 처리해주는 플러그인# IME suppor..