$ getent group <GROUP_NAME> | cut -d: -f3예를 들어, docker 그룹의 gid를 얻고 싶다면
$ getent group docker | cut -d: -f3어느 파일의 소유 그룹의 gid를 얻고 싶다면.
$ stat -c "%g" <FILE_NAME>예를 들어, /var/run/docker.sock의 소유자가 root:docker일 때 docker의 gid를 얻고 싶다면
$ stat -c "%g" /var/run/docker.sock다음 form을 구성하는 HTML elements에 대해서 알아보자.
form element는 다른 input이나 button elements들을 담는 element이다. form에는 action과 method, 두가지 attributes를 넘겨야 한다. action attribute는 그 form의 data를 어디로 submit할지를 정한다. method attribute는 그 form의 data를 get으로 보낼지, post로 보낼지를 정한다. 일반적으로 get method는 query string으로 표현되므로 unsecured data를 다룰 때 사용되고, post는 secure data를 다룰 때, 또는 많은 양의 data를 다룰 때 사용된다. 다음과 같은 형식이다.
input element는 text input field, radio buttons, checkboxes를 만든다. type과 name attribute가 필요하다. type attribute는 입력의 type을 정한다. name attribute는 form을 submit할 때 구분할 unique name을 정한다. form data는 key-value pairs로 구성되는데, 이 때 키가 되는 것이 name이고, 해당하는 값이 value가 된다.
text type의 예제는 다음과 같다. maxlength attribute로 최대 길이를 정할 수 있다.
E-mail의 입력에는 email type을 사용할 수 있다.
password의 입력에는 password type을 사용할 수 있다.
checkboxes를 사용할 때는 checkbox type을 사용한다. name에 unique한 값을 주고, 각 checkbox의 value에도 unique한 값을 준다.
radio buttons를 사용할 때는 radio type을 사용한다. 모든 name에 같은 값을 주고, 각 button의 value에 unique한 값을 준다.
label element는 input elements들과 연관된 text를 줄 때 사용한다. 예를 들면 위에서 “이름 :” 같은 것들. 스크린리더를 사용하는 사람들에게 도움이 된다. label element는 input의 id attribute와 연관되는 for attribute를 가진다.
textarea element는 여러 줄의 text 입력을 위해 사용한다. rows와 cols attributes로 size를 지정할 수 있다.
fieldset element는 여러 form 내의 elements들을 그룹짓고 싶을 때 사용한다.
select element는 select boxes를 만든다. 매우 긴 list의 옵션 중 하나를 선택할 때 쓴다. select element 안에 option element의 list를 넣어서 만든다.
button element는 form을 submit할 때 사용한다. type attribute로 세가지 값을 사용할 수 있다. 첫번째로 아무 행동도 안하는 것, 두번째로 “reset”, 이걸 누르면 form 값들이 모두 리셋된다. 마지막으로 “submit”, 클릭하면 submit한다.
CSS는 HTML에 style을 더할 때 사용한다. 다음과 같은 형식이다.
selector or selector list {
CSS declarations (= property: value;)
}
예를 들면 다음과 같다.
p, h1, h2 {
background: black;
color: white;
}
이를 HTML에 적용하는 방법은 여러가지가 있다.
<head>나 <body> 태그 내에 <style> 태그를 추가하는 방법. head안에 넣는 게 더 빠르다.
<link>를 통해 외부 리소스로부터 적용하는 방법. 예를 들면, <link href=”styles/mystyle.css” rel=”stylesheet”>. 가장 추천.
CSSOM (CSS Object Model)은 HTML DOM과 비슷하게 style에 대한 in-memory representation이다.
javascript로 HTML DOM을 접근할 때 다음과 같은 코드를 사용해서 DOM element의 style property를 access할 수 있다.
const contentElement = document.querySelector(‘.content’);
contentElement.style.fontWeight = ‘bold’;
비슷하게 CSSOM은 window object의 getComputedStyle 메소드로 access할 수 있다.
const contentElement = document.querySeletor(‘.content’);
window.getComputedStyle(contentElement);
이건 contentElement class attribute로 그 element의 read-only computed style을 return한다.
CSS로 HTML 문서의 element를 지정하고자 할 때 selector를 사용한다.
3가지 일반적인 selector가 있다.
class attribute: . 으로 시작하는 class selector. <h1 class=”heading”>Heading</h1> 을 select하고 싶다면, .heading selector를 쓴다.
id attribute: # 으로 시작하는 id selector. <div id=”dasomoli”> <!– login content –> </div> 라면, #dasomoli를 쓴다.
모든 element를 선택하고 싶으면 Universal Selector (*)를 쓴다. 다음과 같은 예제는 html에 값을 셋팅하고, 모든 자식 element들에 이를 inherit한다.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Attribute selector를 사용하면 attribute가 있는지 또는 attribute 값에 따라서 select할 수 있다. 대괄호([, ])를 쓴다.
[attribute=value]: attribute값이 value인 모든 element를 select한다. [lang=”en”] 은 lang attribute가 en인 모든 element를 select한다.
[attribute^=value]: attribute 값이 value로 시작하는 모든 element를 select한다. [href^=”https://] 는 href attribute가 https:// 로 시작하는 모든 element를 select한다.
[attribute$=value]: attribute 값이 value로 끝나는 모든 element를 select한다. [href$=”.com”] 은 href attribute가 .com으로 끝나는 모든 element를 select한다.
[attribute=value]: attribute 값 안에 value가 들어간 모든 element를 select한다. [href=”co.kr”] 은 href attribute가 co.kr과 들어간 모든 element를 select한다.
Pseudo-class는 특정 상태에 있는 element를 select한다. :keyword 같은 형식으로 쓴다. 대단히 많은 pseudo-class가 있는데, 대부분의 개발자들은 link를 styling할 때 처음 본다. link는 여러 상태를 갖는다.
사용자가 link에 마우스를 올렸을 때, :hover pseudo-class가 적용된다.
가 본 link일 때, :visited pseudo-class가 적용된다.
click될 때, :active pseudo-class가 적용된다.
예를 들면,
a:link, a:visited: {
color: blue;
text-decoration: none;
}
a:hover, a:active {
color: red;
text-decoration: dashed underline;
}
순서에 주의해야 하는데, 위의 순서를 바꾸면 hover 효과를 볼 수 없다. love-hate로 외우면 쉽다.
다른 유용한 pseudo-class로 :checked, :disabled, :focus가 있다.
중첩된 자식들의 패턴을 select할 때 도움이 되는 pseudo-class가 있다. :first-child, :last-child, :nth-child, :nth-last-child, :first-of-type, :last-of-type, :nth-of-type, :nth-last-of-type 등등.
예를 들어, 다음과 같이 하면 3줄마다 반복되는 패턴을 만들 수 있다.
li {
display: block;
padding: 16px;
}
li:nth-child(3n-1) {
background: deepskyblue;
color: white;
font-weight: bold;
}
li:nth-child(3n) {
background: skyblue;
color: white;
font-weight: bold;
}
위의 예제에서 3n-1 대신 odd 나 even 같은 keyword를 사용할 수도 있다.
element의 일부를 select하고 싶을 때는 Pseudo-element를 쓴다. ::keyword 형식으로 쓴다.
::first-letter, ::first-line, ::selection, ::backdrop 등등.
위에서 설명한 여러 방법을 합쳐서 사용하면 더 강력하다. 예를 들면, primary class인 li element를 select하고 싶다면, li.primary를 쓰면 된다.
primary class인 ul element의 direct children인 모든 li를 select하고 싶으면, ul.primary > li
selected class인 li element의 다음 sibling을 select하고 싶으면, li.selected + li
selected class인 li element의 모든 다음 sibling들을 select하고 싶으면, li.selected ~ li
li.selected + li 는 다음 하나만, li.selected ~ li 는 다음부터 전부 다인 것을 주의하라.
CSS specificity는 어느 style이 적용될지를 결정하는 factor이다. 태그에 style attribute로 적용되는 inline style은 가장 높은 specificity 값을 갖는다. 그 다음이 ID selector, 그 다음이 class selector나 attribute selector, 그리고 다음이 element type이다. 일반적으로 이를 표현하는 방법이 ,로 나눈 integer list로 많이 표현한다. inline style은 1, 0, 0, 0이다. id selector는 0, 1, 0, 0. class selector나 attribute selector는 0, 0, 1, 0. h1 같은 element selector는 0, 0, 0, 1이 된다.
예를 들면, li,selected a[href] 는 2 element selectors(li, a), 하나의 class selector(.selected)와 하나의 attribute selector([herf])를 갖으므로, 0, 0, 2, 2가 된다.
다른 예로 #newItem #mainHeading span.smallPrint는 두 ID selector, 하나의 class selector(.smallPrint), 하나의 span element를 갖으므로, 0, 2, 1, 1이 된다.
위의 둘을 비교하면, 두번째 것이 첫번째 것보다 더 specific하다.
그런데 여기에 !important 를 쓰면 가장 우선한다. 위의 표현 방법에 따르면 1, 0, 0, 0, 0이 된다. inline보다 더 우선한다.
예를 들면, 다음과 같은 걸 보자.
<style>
div.media {
display: block;
width: 100%;
float: left;
}
.hide {
display: none;
}
</style>
<div class=”media hide”> 어쩌고 저쩌고 </div>
여기서 div는 media와 hide 둘 중 어느 것이 적용될까. div.media는 0, 0, 1, 1 이다. .hide는 0, 0, 1, 0이다. 따라서 .hide의 display: none을 div.media의 display: block이 override한다. .hide는 적용이 안된다. 이럴 때 아래처럼 하면 된다.
.hide {
display: none !important;
}
생활코딩에 Atom editor 사용법(https://opentutorials.org/module/1579)이 있길래, 보면서 몇가지 적는다. 적다보니, 내가 뭘 또 이런 것까지 적고 있나 싶긴 한데… ^^;;
<div>
<ul>
<li></li>
</ul>
</div>
<div></div> <p></p> <blockquote></blockquote>
<nav>
<ul>
<li></li>
</ul>
</nav>
<a href=""></a>
<a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a>
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
<nav id="navigation"></nav>
<li class="list"></li>
<a href="" target="_blank" title="asdf"></a>
<li><a href="">table</a></li>
<ul class="li item1"></ul> <ul class="li item2"></ul> <ul class="li item3"></ul> <ul class="li item4"></ul> <ul class="li item5"></ul>
[출처] 윈도우 공유폴더 다른계정으로 로그인하기|작성자 미네르바
윈도우 공유폴더를 “암호 저장”으로 접근할 경우 다른 사용자로 로그인하기 꽤 까다로운 것 같다. 간단한 방법을 예전에 알았던 듯 한데 기억이 나질 않는다.
암호 저장 외에 공유 폴더를 다른 도메인으로 접근하고 싶을 때도 이 방법은 유용하게 쓰일 수 있다. 방법을 살펴보자.
1. 기존 연결 보기 및 상태 저장
2. 기존 연결 끊기
3. 새로운 연결 만들기