본문 바로가기

전체 글

 (68)
css float와 position float:요소를 좌우 방향으로 띄움 (주로 수평 정렬을 할 때 사용된다.) 기본값 : none float를 사용하면 대부분 그 요소는 display가 block으로 바뀐다. 단 flex, inline-flex, grid는 제외 float의 속성값 none: 요소 띄움 없음 left: 왼쪽으로 띄움 right:오른쪽으로 띄움 ex1 수직으로 쌓인 요소를 수평으로 정렬한 예시) home about information community float를 사용하면 float를 사용한 요소 주변으로 text가 붙는다 ex2 float를 사용한 요소 주변으로 text가 붙는 현상에 대한 예시 ) Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores qui..
css 글꼴과 문자 font- : 글자 관련 속성들을 지정한다. font-style: 글자 기울기를 설정한다 기본값: normal ex) 안녕하세요 font-style에 속성 값 normal: 기울임이 없는 글자를 설정한다 italic: 이탤릭체로 글자를 설정한다. font-weight:글자의 두께를 설정한다. 기본값 : nomal font-weight의 속성 값 normal:기본 글자 두께(400) bold: 두꺼운 글자두깨(700) 숫자: 100~900까지 100단위숫자로 글자 두께를 설정한다. (주로 normal(400)을 기준으로 얇게, 두껍게 설정한다) ex) 안녕하세요 font size:글자 크기를 설정한다. 기본값:16px 글자 크기를 설정할때에는 주로 px로 크기 설정을 한다. ex) 안녕하세요 line-he..
css 단위와 박스모델 px: css에 값을 설정할 때 점을 이용해 화면에 출력하는 가장 작은 단위 (고정값) ex1) container parent child1 child2 위 코드와 같이 가로너비를 고정하여 출력할 수 있음을 알 수 있다. %: css에 값을 설정할 때 부모 요소의 값을 참조하는 상대 값 ex2) container parent child1 child2 위 코드에서 % 는 부모 요소의 값을 참조하기에. parent는 부모인 container에 가로나비 600px에 50%인 300px chlid1,2는 부모 요소인 parent의 가로너비 300px에 50%인 150px를 가져가 ex1)과 동일한 값을 출력함을 알 수 있다 em : 자기 자신의 글자크기로 값을 설정한다. ex) 위 코드에서 style부분에 cla..
css 선택자, 상속에 관한내용 선택자란?: html에서 css를적용할때 css에 속성과 값을 적용할 대상이다. 속성과 값의 역할: 속성과 값은 어떤방식에 css를 사용할꺼니? =속성이다. 그 방식에 얼마의 만큼의 값을 넣을꺼니? =속성값이다. ex) div{ font-size:20px} 위 css코드에서 div라는 태그에 font-size(속성)라는 방식을 사용할껀데 그값은 20px(속성값)이야 라고 말 할 수있다. css 사용방법 선택자 { 속성:속성값; 속성:속성값; 속성:속성값; } 위 와같은 방식으로 css를 작성한다 ex) 안녕하세요 hello 위와같이 작성 할 수 있다. css는 주로 html과 연결할때 link태그를 이용해 외부에서 불러오지만 css코드와 html코드를 함깨보여주고 싶기에 여기선 style태그를 이용해 h..
HTML 전역속성과 관련된 내용 전역 속성이란? HTML 모든 요소에서 공통적으로 사용 가능한 속성 class속성: 1요소의 별칭을 설정하는 기능을 한다. 2 class라는 별칭을 이용해 js와 css를 연결시켜 줄 수 있다. css에서. className처럼. 을 사용하여 css를 사용할 수 있다. 3 class는 동일한 이름으로 여러 번 사용할 수 있다. Above point sounds a bit obvious. Remove/rewrite? 안녕하세요 id속성: 1문서에서 고유한 식별자를 설정하는 기능을 한다. 2 id값은 js와 css를 연결시켜 줄 수 있다 css에서 주로 #idName처럼 #을 사용하여 css를 사용할 수 있다. 3 동일한 이름으로 여러번 사용할 수 없다 즉 1번만 사용 가능 ex) Above point so..
HTML 표(table)와 양식(form)에 관련된 태그들 table, tr, th, td태그 table태그: 1데이터표(table)을 생성하여 열(tr)과 행(td)을 생성할 수 있게 해 준다 2 block요소는 아니지만 block요소와 유사하게 동작한다 caption태그 : 1 caption태그는 table에 제목을 설정해 준다. tr태그: 1table안에서 열(줄)을 생성해준다 td태그: 1tr태그안에서 행(칸)을 생성해준다 2 사용되는 속성들 colspan: 속성 값만큼 행을 확장한다 기본값 = "1" rowspan:속성 값만큼 열을 확장한다. 기본값 = "1" colspan이나 rowspan을 사용할때에는 병합되는 칸에 td는 지워주어야 한다. th태그: 1td태그와같이 행(칸)을 생성해주는데 th로 만들어진 행은 제목을 명시한다. 때문에 글자가 굵게 ..
HTML 멀티미디어에 관련된 태그들 img태그 : 1 이미지를 삽입하는 태그이다 2 img태그는 빈 태그로써 끝나는 태그가 없다 3 속성 중 src와 alt 속성은 필수로 적어줘야 한다. src : 이미지에 링크나 이미지가 저장되어있는 경로를 명시한다 alt : alternative에 줄임말로 이미지가 출력되지 않았을 때 출력되는 대체 택스트를 명시한다. 4 : 인라인요소이다 ex) 위코드와같이 src에 구글 로고에 대한 이미지 경로를 적어줬다 만약 이미지를 다운로드했다면 다운로드한 이미지가 들어있는 폴더를 찾아 경로를 적어주게 된다. 추가적으로 이미지를 다운로드해서 사용하는 방식을 권장한다 그래야 코드 가독성이 좋아질뿐더러 이게 어떤 이미지였는지 기억이 안 날 때 이미지가 저장되어있는 폴더에 가서 확인하기에도 편하다 alt 부분을 보면 ..
HTML 인라인 요소인 태그들 a태그 : 1a태그는 클릭했을 때 설정된 url로 이동시켜주는 하이퍼링크를 만들어주는 기능을 하는데 이때 여러 속성 값이 쓰인다. 인라인 요소이다. 2 href : 이동할 페이지에 주소(url)를 작성하는 속성이다 3 target : _self,와 _blank가 있는데 _self가 기본값이다 _self = 해당 페이지에서 a태그에 href에 해당하는 페이지를 열어주고 _blank=새로운페이지에서 a태그에 href에 해당하는 페이지를 열어준다. 4 인라인요소이다 다른 속성들도 많지만 이 두 개만 알고 있어도 사용하는데 문제가 없다. ex) 네이버 구글 네이버 웨일 위 코드를 확인해보면 ul과li태그를 사용하여 목록을 구성해줬고 a태그를 이용해 하이퍼링크를 설정해줬는데 이때 href로 주소(url)을설정해줬..

티스토리툴바