tp134679 님의 블로그

1. 가상요소란2. 가상요소와 다른 이미지 넣는 방식을 복습해보자.     1. 가상요소가상요소는 가상의 요소 즉 html 문서상에서는 보이지 않는 요소를 추가하는 것을 말합니다. 사용하는법은 가상요소를 사용하고자 하는 요소 뒤에 (::)을 사용하여 가상요소를 사용하겠다 라고 명령합니다.단 요소를 꾸미기 위한요소이므로 style 시트를 사용하거나 외부 css파일을 연결해야 하며 content:" "을 반드시 사용해야합니다. >> "content를 사용하겠다 선언" 가상요소의 종류는 ::before: 요소의 앞쪽에 새 가상의 요소를 추가합니다.::after: 요소의 뒤쪽에 새 가상의 요소를 추가합니다.많이쓰이고 새 요소를 추가하는건 이 두가지 뿐입니다. ::marker: 목록 요소 앞에 마크를 선택합니다...

2주동안 배운 HTML과 CSS를 사용해 2인1조로 그룹을 지어서 페어 코딩을 진행하였다.해당 웹페이지를 만드는 내용이였는데. 그동안 배워오면서 영역잡는것이 가장 중요하다고 배웠기에 영역을 잘 파악하는것이 중요 했다. 눈대중으로 대강 파악한 영역은큰 영역안에 6개의 영역으로 나뉘어 지는것을 파악하고 HTML 구조를 잡았다.해당 이미지 처럼 container 이라는 큰 영역 안에  header 최상단 파란색 선 영역main_banner 빨간색 선 영역search 갈색선 영역ad 녹색선 영역footer 노란색선 영역sidebar 청녹색선 영역나누어서 디자인을 하였다 또한 강조해주신게 협업을 할때 모르는사람이 보거나 다른사람에게도 이해가 가능할만한 영역의 이름을 잡아야 함으로 영역과 세부 영역의 이름을 구체적..

1. position 속성의 종류  css의flex 에 이어서 추가로 레이아웃을 원하는곳에 배치하기 쉽게 만들어주는  position 을 배우게 되었다.   1. position 속성의 종류 position은 CSS의 속성중하나로 레이아웃을 배치하거나 아이템을 이동시킬때 사용한다. 4면 (상하좌우)를 기준으로 아이템을 이동시킬 수 있으며 +값 뿐만아니라 - 값도 사용가능하다다만 방향값이 +일때 명령한 방향으로 이동하는게 아니라 반대쪽방향으로 이동하게된다. position:static static은 따로 속성을 부여하지 않아도 상시로 적용되고있는 설정이 불가능한 기본값이다. 1. position:relative relative은 기존의 위치부터 계산되는 속성이다 즉 static(기본값)과 시작이 같으며 4..

1. FLEX의 속성,형태와 주축과 교차축 의 이해2. flex를 활용한 과제풀어보기 저번시간에 다음속성을 예측하기 힘들기에 사용하지 않는float 대신에 원하는 위치에 디자인 하기위한 새로운 속성인 flex를 배우게 되었다.  1. FLEX의 속성,형태와 주축과 교차축 의 이해flex를 이해하기 위해선 주축과 교차축의 개념을 이해하면 쉬운데 flex의 기본속성값은  row(가로)로 정렬해주는 display:inline-block 와같이 블럭을 가로로 정렬해주는 효과를 가지고 있습니다. 또한 부모가 충분한 크기를 가지고 있어햐 하며 column(세로)축을 기준으로 명령어를 줄 수 있으며 가로와 세로축을 활용하여 아이템들을 원하는곳에 배치할 수 있습니다.   1. flex의 기본명령어의 기본 flex 명령..

1. float 의 배경과 특징  2. float 의 문제점  오늘은 CSS에 있는 Float를 배우고 활용하였다.   1.float 의 속성과 특징 float의 속성과 특징은 넓이와 높이를 설정가능한 블록상태를 가지는 속성이며 life, right를 이용하여 영역의 좌우 영역에 표현이 가능합니다.float 말그대로 띄다 라는 표현을 가지고 있는데 float 속성을 사용하면 해당 이미지와 같이 띄어진 형태를 띄어서 사용자에게 보여지게 된다.  해당이미지처럼 123에 float 속성을주고 4번 은 좀더 큰 박스를 만들고 결과값을 확인해보면 오른쪽 이미지처럼 1,2,3 번 박스 밑에 4번 박스가 위치 하는것을 알 수 있다.또한 최소한의 너비와 높이 값을 유지하려고 하는 인라인형태와 달리 float를 사용하면..

1. CSS padding,magin의 구분과 활용법2. padding과 magin을 사용하여 컨텐츠를 꾸미고 알아보기  전시간에 배운 padding과 magin을 보강하면서 복습하는 시간을 가졌다.  1. CSS padding,magin의 구분과 활용  1. padding 패딩을 사용하여 밀어낸 영역은 병합현상이 일어나지 않으며, 콘텐츠의 연장선으로서 패딩을 사용하여 넓어진 영역 또한 색이 입히고  추가속성 또한 모두 상호작용이 가능하다.해당 HTML CSS코드를 사용하여 알아보도록 하자  해당 블록형태의 box1과 box2 가 붙어있는 것 처럼 보이지만 box1과 box2의 콘텐츠의 연장선인 padding영역이 box1,box2각각 상하 20px 넓어져서 aqua색의 속성 또한 넓어졌고 병합현상이 일..

1. margin과 padding2. margin과 padding을 활용한 원하는 공간 디자인    1.margin과 padding  기본적으로 HTML은 4가지의 영역으로 구성된다고 볼 수 있다. 바깥쪽부터 margin,border,padding,content 4가지의 영역으로 나뉘게 되는데 margin과 padding은 구역을 나눈다는 역할은 비슷해보이나 각자 다른 사용도를 보인다.margin과padding 둘다 4면을 가지고 영역을 활용하기 때문에  상하좌우로 나누어 명령어를 내릴 수 있다.padding을 예로 들자면 padding: 20px 명령어를 활용하면 4가지 면(상하좌우) 모두에 20px만큼의 공간을 벌리나 아레의 명령어처럼 구역을 나눠서 명령어를 넣는것도 가능하다.  1.2 margin과..

1. CSS의 선택자 2. 선택자를 활용하여 원하는 블럭에 적용하기  1. CSS의 선택자 종류와 활용CSS는 스타일 시트로써 원하는 라인과 위치에 스타일을 적용시킬만한 선택자를 사용하는데 배운 선택자를 살펴보자면1. class 선택자class사용한 값 을 선택하여 속성과 속성값을 적용함 { (.) 을 이용하여2. id 선택자id를사용한 값 을 선택하여 속성과 속성값을 적용함{ (#) 을 이용하여 id를 사용함}3.태그 선택자명령어를 직접 태그하여 속성값을 적용함 (웬만하면 태그 선택자는 자제하는게 좋다 >>선택한 태그에 모든 속성값이 부여되기 때문에 혼선을 만듬) 4. 그룹 선택자공용속성 (class,id등)를 이용한 한 그룹을 묶어서 속성값을 적용함 5. 직계 자식 선택자선택한 요소의 직계 "모든"자..

1. CSS의 속성과 속성값2. CSS문법을 활용해서 특정 테그를 꾸밀 수 있는 능력   CSS란. CSS의 기본정의는 HTML등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일 시트 언어라고 합니다. 과거에서부터 HTML에 디자인적인 요소를 포함시켜 작성해주는 기능을 가졌다고 한다.  1. CSS의 속성과 속성값CSS는 구체적으로 속성과 속성 값으로 나뉘게 되는데속성 (Propertise): 변경할 스타일 기능 (예: font-size, width, background-color) 을 나타내는 식별자입니다.값 (values): 지정된 각 속성에 해당하는 값 을 스타일링 하거나 변경하는 방법을 나타냅니다.속성중 고유속성과 공용속성이 있는데 고유속성은 자신만이 고유로 가진속..

1. HTML 실행과 확장팩2. HTML 형태 구조와 명령어 블록체인 11기 첫수강에 들어 HTMI 프로그렘을 처음으로 배우게 되었다. 배운내용을 잊어버리지 않게 복습하며 블로그를 써보려고 합니다. 1.HTML 실행과 확장팩vscode를 사용한 HTMI 코딩을 처음 사용해보았는데 기본적으로 모든 앱화면은 코딩으로 만들어진 화면이고 세부적인 내용 버튼하나까지 코딩으로 짜여진 것 을 알 수 있었습니다(F12). vscode는 사용자의 편의성을 위하여 다양한 모드를 추가하여 사용할 수 있었으며 우리는 이중에서 한글팩과 live Server. 을 설치하여 사용하였다. live Server은 사용자의 컴퓨터를 실제 서버처럼 사용가능하게 해주는 확장팩이라고 합니다.  2. HTML 형태 구조과 명령어컴퓨터의 명령어..